首页 文章

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

提问于
浏览 次
1

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

我正在考虑以下方法来实现上述方法：

Approach 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});
  };

我不喜欢的是 getState 直接传递给 read 方法 .

Approach 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 不应该返回任何数据：https://github.com/reactjs/redux/issues/61

我向大师们提出的问题：哪种方法更符合 react-redux 最佳做法？有没有更好的方法来实现上述？

EDIT: 现在我要修改第一种方法：

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});
}
reactjs redux react-redux redux-thunk

1 回答

  • 0

    每个reducer都可以访问它自己的状态片段，因此它不需要传递给它的任何数据，这些数据已经存在于它自己的状态中 . 如果您有一个需要更新多个状态切片的操作，这些切片是单独的reducer的一部分，则每个reducer都应该监听操作并分别修改自己的状态 . 这种动作和减速器的分离是我认为使redux非常强大的一个方面 .

    因此，在我看来，执行此操作的最佳方法是使用从read函数返回的任何内容调度“READ”等操作 . 然后，每个包含由于该操作而必须修改的状态的reducer将侦听“READ”操作，然后修改它自己的状态 .

    希望这可以帮助 .

    回复于

相关问题