如何正确使用异步功能与react-redux

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功能未参数的新功能。此功能将在您分派时执行。您可以在异步操作中使用给定的dispath函数来分派实际的简单操作或甚至其他函数。

这种类型的异步操作称为thunk。