Reactjs 在react redux中处理异步调用的返回

Reactjs 在react redux中处理异步调用的返回,reactjs,redux,react-redux,redux-thunk,Reactjs,Redux,React Redux,Redux Thunk,假设有一个异步读取(args)方法返回一些数据。 我使用redux-thunk和redux-promise来调度异步操作。 该方法需要访问redux存储才能读取状态树的某些部分,以及传递给thunkMiddleware.withExtraArguments()的额外参数。该方法是一种抽象,该方法的特定实现可能需要访问状态树的不同部分(例如,当前会话的ID、数据源的名称等)。 从方法返回的数据在传递到进行渲染的组件之前需要进行后处理 我正在考虑以下方法来实现上述目标: 方法1。将getState函

假设有一个
异步读取(args)
方法返回一些数据。 我使用
redux-thunk
redux-promise
来调度异步操作。 该方法需要访问redux存储才能读取状态树的某些部分,以及传递给
thunkMiddleware.withExtraArguments()
的额外参数。该方法是一种抽象,该方法的特定实现可能需要访问状态树的不同部分(例如,当前会话的ID、数据源的名称等)。 从方法返回的数据在传递到进行渲染的组件之前需要进行后处理

我正在考虑以下方法来实现上述目标:

方法1。
getState
函数传递给
async read()
方法;执行如下操作:

  const actionRead=()=>async (dispatch, getState, {rpc})=>{
   dispatch({type:ActionReadStarted, ...});
   let data=await read(rpc, getState);
   // post process the data as needed
   dispatch({type:ActionReadComplete, data});
  };
这里我不喜欢的是直接传递给
read
方法的
getState

方法2。使
read()方法本身成为动作创建者:

const actionRead=()=>async (dispatch, getState, {rpc})=>{
 dispatch({type:ActionReadStarted, ...});
 let data=await dispatch(read());
 // post process the data as needed
 dispatch({type:ActionReadComplete, data});
};

const read=()=>(dispatch, getState, {rpc})=>{
 const arguments=getState().some_arguments;
 return rpc.actual_read_returns_promise(arguments);
}
在这两种情况下,reducer都只是将数据写入存储。我不能将后处理逻辑放入reducer,因为它可能会导致副作用

我个人倾向于第二种方法,但这篇文章建议
dispatch
不应返回任何数据:

我向专家们提出的问题是:哪种方法更符合
react-redux
最佳实践?有没有更好的方法来实现上述目标

编辑: 现在,我将采用修改后的第一种方法:

const actionRead=(args)=>async (dispatch, getState, api)=>{
 dispatch({type:ActionReadStarted, ...});
 let data=await read(args)(dispatch, getState, api);
 // post process the data as needed
 dispatch({type:ActionReadComplete, data});
};

const read=(args)=>(dispatch, getState, {rpc})=>{
 const arguments=getState().some_arguments;
 return rpc.actual_read_returns_promise({...args, ...arguments});
}

每个reducer都可以访问它自己的状态片,因此它不需要向它传递任何已经存在于它自己状态中的数据。当您有一个操作需要更新多个状态片,这些状态片是单独的还原器的一部分时,每个还原器都应该侦听该操作并分别修改自己的状态。这种动作和减速机的解耦是我觉得redux非常强大的原因之一

因此,在我看来,最好的方法是使用READ函数返回的任何内容发送一个动作,比如“READ”。然后,包含由于该操作而必须修改的状态的每个reducer都将侦听“READ”操作,然后修改它自己的状态


希望这能有所帮助。

每个reducer都可以访问自己的状态片,因此不需要向其传递任何已经处于自己状态的数据。当您有一个操作需要更新多个状态片,这些状态片是单独的还原器的一部分时,每个还原器都应该侦听该操作并分别修改自己的状态。这种动作和减速机的解耦是我觉得redux非常强大的原因之一

因此,在我看来,最好的方法是使用READ函数返回的任何内容发送一个动作,比如“READ”。然后,包含由于该操作而必须修改的状态的每个reducer都将侦听“READ”操作,然后修改它自己的状态


希望这能有所帮助。

感谢您的回复,我同意修改减速器中的状态是最明显的做法。然而,我在问题中提到“我不能将后处理逻辑放在reducer中,因为它可能会产生副作用。”这是基于reducer必须是纯函数的建议(参见示例)。在我的例子中,数据的后处理肯定不是一个纯粹的功能,因为它依赖于来自其他多个来源的数据。因此,我必须寻找一种解决方案,在其他地方进行后处理。谢谢您的回复,我同意修改reducer中的状态是最明显的做法。然而,我在问题中提到“我不能将后处理逻辑放在reducer中,因为它可能会产生副作用。”这是基于reducer必须是纯函数的建议(参见示例)。在我的例子中,数据的后处理肯定不是一个纯粹的功能,因为它依赖于来自其他多个来源的数据。因此,我必须寻找一种在其他地方进行后处理的解决方案