reducer 两次返回状态，如何在 store 中更新？答案

【问题标题】：reducer return state twice, how to update in store?reducer 两次返回状态，如何在 store 中更新？
【发布时间】：2020-10-17 12:10:45
【问题描述】：

我的reducer以异步方式返回状态，因为它会与另一个组件交互，如何在.then中reducer更新状态后使组件重新渲染？

switch (action.type) {

case RELEASE_PAYMENT:

(new PaypalContract())
            .releasePayment(action.id)
            .then(() => (new PaypalContract()).getState(action.id))
            .then(function(e) {
                console.log("status in orderReducer:",status[e])
                return{
                  ...state,
                  orderStatus: status[e]
                }
            })
return state

【问题讨论】：

为了与异步函数交互，例如获取数据或底层智能合约，我认为将函数放在 reducer 或 action 中而不是 react 组件中是很巧妙的。由于一个成功的异步函数首先会反馈一个“待处理”，然后在它获得所需的数据后，它会返回“已完成”。所以'redux-promise-middleware'可能是我在这种情况下真正需要的。我需要更改 action 和 reducer 中的某些内容以使其工作：github.com/pburtchaell/redux-promise-middleware/blob/main/docs/…

标签： reactjs react-redux reducers

【解决方案1】：

你不能从reducer函数返回两次状态，你不能以异步方式从reducer函数返回更新后的状态。

从 .then() 方法的回调函数返回某些内容不会使其成为外部函数的返回值，即在您的情况下为 reducer 函数。

Reducer 函数是同步的，它们接受一个动作并基于该动作返回更新的状态。所有这些都是同步完成的。

您在 reducer 函数中所做的事情不会像您期望的那样工作，并且您的 reducer 函数中的 return 语句将始终在异步代码完成之前执行。这意味着你的 reducer 函数总是返回相同的状态，这意味着你的 redux 存储永远不会更新。

解决方案

您需要一种方法来分派触发数据获取的操作，一旦数据可用，就应该分派另一个由 reducer 函数接收的操作。这个新动作应该包含异步获取的数据，作为有效负载，reducer 函数将使用与该动作关联的有效负载适当地更新状态。

以下是允许您这样做的几个选项：

使用第一个选项更容易，所以我建议从它开始，但您也可以探索第二个选项，这也有助于高级用例。

这里有一些资源可以帮助您开始使用上述每个选项：

【讨论】：

看起来 redux thunk 和 redux saga 用于响应组件以使用异步获取。对于在区块链中与智能合约进行交互的 react/redux，我认为将这些交互放在 action 或 reducer 上可能会更简洁，而不是放在 UI 组件中。 Reducer 是同步的，所以最好让 action 模块向 reducer 发送更多消息，例如“待处理”、“已完成”，我在网上搜索然后发现 redux-promise-middleware 可能正是我所追求的。谢谢你的建议。
redux-promise-middleware 也可以，但redux-thunk 和redux-saga 也可以做你想做的事。 React 组件只是调度一个动作来启动数据获取过程，而实际的数据获取发生在组件之外。您可以使用其中任何一种来达到预期的效果。

【解决方案2】：

从 API 获得响应后，您需要将数据传递给 reducer。控制数据流会更简单。您可以在此使用async/await。

async function_name() {
   const res = await API_CALL_HERE
   res.then( data => INVOKE_YOUR_DISPATCH_HERE(data))
      .catch(err => console.log('error'));
}

在减速器中

 case RELEASE_PAYMENT:
  return {...state, orderStauts:data[e]

【讨论】：