reducer返回状态两次，如何在存储中更新

Question

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

开关(动作类型(｛

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

Answer 1

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

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

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

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

解决方案

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

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

• redux thunk
• Redux Saga

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

这里有几个资源可以让你开始使用上面提到的每个选项：

• Redux Thunk Explained with Examples

• Redux Saga Example

Answer 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]