redux thunk 等待来自分派的数据，然后再进行另一个分派

Question

我正在尝试通过尽可能地使用 redux thunk 来改进我的代码，但我已经搜索了很多，没有解决方案与我的研究相对应。

基本上，对于 twitch API，我们必须进行 2 个 API 调用，一个用于获取身份验证密钥，另一个用于从该密钥获取数据。

这是我当前的代码：

        dispatch(getOauthKey())      
    }, [])

    useEffect(() => {

        if(refresh){
            dispatch(getAllStreams(oAuthKey.access_token))
        }
        
    }, [oAuthKey.access_token])

在这里，我必须使用 true/false 和 refresh 来知道何时调度或不调度，并且 [oAuthkey.access_token] 在变量接收数据时重新启动 useEffect。

它可以工作，但根本没有优化，我知道你可以用 thunk 链接调度，但我做不到。这是我尝试做的：

    const thunkA = () => (dispatch, getState) => {
        dispatch(getOauthKey())
        
    }

    const thunkB = (key) =>(dispatch, getState) => {
        dispatch(getAllStreams(key))
       
    }
    console.log(oAuthKey.access_token)
    useEffect(()=> {
        dispatch(thunkA()).then(() =>dispatch(thunkB(oAuthKey.access_token))
      );
        
    }, [])

我认为这是一个错误：

TypeError：无法读取未定义的属性（读取“then”）。我指定第一次调用 api 将密钥发送到存储中，因此 oAuthKey 来自后者

对不起，我对 reactjs / redux / thunk 真的很陌生，问题并没有在这里跳出来哈哈。

非常感谢

Answer 1

有几个选项可以做到这一点。作为标准的redux-thunk 解决方案，您可以使用promise 更改来调度thunk 中的操作。

首先需要添加这个包：redux-promise-middleware和官方documentation。

给定带有异步负载的单个操作，中间件将操作转换为单独的待处理操作和单独的已完成/已拒绝操作，表示异步操作的状态。

现在您可以链接您的操作：

const chainMyActions = () => {
  return (dispatch) => {
    const response = dispatch(thunkA());

    response.then((data) => {
      dispatch(thunkB(data.access_token))
    })
  }
}

现在您可以在您的useEffect 中调用示例chainMyActions 函数。