在带有异步调度的 react-native 中使用 redux-thunk

Question

我在我的 react-native 代码中设置了 redux-thunk。

在 mapDispatchToProps 中我有：

const mapDispatchToProps = dispatch => {
     return {
         login: (state, navigator) => dispatch({
             type: "USER",
             payload: loginFunc(state, navigator)
          }),
     }'
}

登录函数是一个 firebase 函数，returns 一个最终 returns 我需要的对象的承诺链。

但是，在我的 reducer 中，我的有效负载看起来像是一个 promise 或一些时髦的对象。看起来像：

{ 
     a: someVal, 
     b: sommeOtherVal, 
     c: someMoreVal,
     ...ValsUpToI.
     i: {
       // The values I actually need show up
     }

这让我很困惑，因为当我尝试执行 payload.myValue 时，我在 redux 状态下得到了 undefined。我不认为只做 payload.i 是安全的，因为这可能是 promise 或 async 的问题，对吗？我很可能以后会成为别的什么人？

Answer 1

使用异步操作方法来执行基于 API 函数的调用，如 redux documentation 中所述。

const mapDispatchToProps = dispatch => {
 return {
     login: (state, navigator) => {
         return loginFunc(state, navigator).then(
             response => dispatch({
                 type: "USER",
                 payload: response
             }),
             error => console.log('An error occurred.', error)
        )
     }
 }

这样您就可以调用基于承诺的函数并正确利用响应或错误。

在带有异步调度的 react-native 中使用 redux-thunk

Using redux-thunk in react-native with async dispatch

javascript

asynchronous

react-native

redux

redux-thunk