Question

我实际上通过重新创建骰子游戏来学习redux，但很难理解完全异步函数是如何进入数据流的。我看过一些不是现实世界的例子，也没有提供足够的信息。我的简短问题实际上是如何为每个容器子项订阅更改并从mapDispatchToProps调度异步函数。

这是指整个代码的链接，如果有帮助的话。 https://www.github.com/strugglecasino/struggle.git

Answer 1

异步操作实际上只是您在商店中调度的函数。

const uploadStarted = () => ({ type: 'UPLOAD_STARTED' })
const uploadSuccessed = () => ({ type: 'UPLOAD_SUCCESSED' })
const uploadFailed = () => ({ type: 'UPLOAD_FAILED' })

const upload = (data) => {
  dispatch(uploadStarted())
  axios.post('upload/url', {data})
    .then(dispatch(uploadSuccess()))
    .catch(dispatch(uploadFailed())
}

mapDispatchToProps({ upload })
mapStateToProps(state => ({ uploading: state.uploading })

const MyComponent = ({ upload, uploadidng }) => {
  return (
    <div>
      { uploading ? 'Uploading...', 'Nothing is going on' }
      <button onClick=(() => upload({ test: 'test'})) />
    </div>
  )
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

这里upload函数返回一个带有dispatch函数un参数的新函数。发送时将执行此功能。您可以在异步操作中使用给定的dispath函数来发送实际的简单操作甚至是其他函数。

此类异步操作称为thunk。

如何正确使用react-redux的异步函数

1 个答案: