Question

也许我在思考这个问题，但到目前为止，我在redux-thunk上阅读的大部分内容都是从API处理异步调用等。

理想情况下，我希望具有相同的行为，但用于UI的转换。

例如，让我们说我有一款游戏，为了简单起见，它需要两名玩家，并且每位玩家都有一个猜测名字。

如果玩家的猜测匹配，那么我想显示对话5秒钟，然后重置游戏。

否则，显示一个对话框，表明下一位玩家的回合时间为5秒。

我有以下代码：

class Game extends Component {
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    const { isMatchedNumbers } = nextProps
    if (isMatchedNumbers) {
      this.props.showDialog('You win!')
      this.props.resetGame()
    } else {
      this.props.showDialog('next turn')
      this.props.nextTurnPlayer()
    }
  }

  render() {
    ...
  }
}


const mapStateToProps = (state, props) => ({
  isMatchedNumbers: state.isMatchedNumbers
})

const mapDispatchToProps = dispatch => ({
  nextTurnPlayer: () => {
    dispatch({ type: NEXT_TURN_PLAYER })
  },
  showDialog: message => {
    dispatch({ type: MESSAGE, message })
  },
  resetGame: () => {
    dispatch({ type: RESET_GAME })
  },

})

export default connect(mapStateToProps, mapDispatchToProps)(Game)

我怎样才能做到这一点？我想在setTimeOut内添加mapDispatchToProps，但我觉得这不是正确的方法。

Answer 1

没有理由你不能使用redux-thunk，事实上，在官方文档中，他们甚至使用setTimeout来模仿异步性质。

function showDialogAsync() {
  return dispatch => {
    setTimeout(() => {
       dispatch(showDialog());
    }, 5000);
  };
}

您可以随意使用这个简单的模式，无论是重置游戏还是显示对话。

Repo with Documentation

Answer 2

Redux的-佐贺

非常适合比redux-thunk更复杂的异步行为

UI上的Redux-异步操作

2 个答案: