React Redux - 在Reducer中添加异步方法是一种反模式吗？

Question

我对整个react-native/redux世界都很陌生,也许这个问题听起来很愚蠢:)

我知道对于API调用或类似的东西,惯例是通过中间件来做到这一点,但它总是必要的(它增加了很多样板).

我成功地在reducer中添加了异步方法来管理设备API连接,例如In-App或Local Notifications,但我想知道以这种方式处理它是否可行.

例如在我的reducer中有这样的方法:

function initInApp(state, itemSkus){
  init(state, itemSkus);
  return {
    ...state,
    itemSkus: itemSkus,
  }
}

而这个管理异步部分:

async function init(state, itemSkus){
  try {
    if( !state.isInit ){
      const prepare = await Promise.all(RNIap.prepareAndroid());
      return{
        ...state,
        isInit: true,
        errorCode: false,
      }
    }
    else {
       return ...state;
    }
  } catch (errorCode) {
    return{
      ...state,
      isInit: false,
      errorCode: errorCode,
      itemSkus: itemSkus
    }
  }
}

也许它在性能方面效率不高或难以维护.你有什么想法？

谢谢 :)

Answer 1

是.减速器不应该有任何副作用.Reducers需要纯函数才能使redux高效工作.这里有几个链接试图解释为什么redux需要Reducer成为纯函数,为什么reduce reducer在redux中如此重要.

正如其他人所说,thunk中间件是处理异步反应的常用方法.

另一种不需要任何库的方法是通过称为"Fat Action Creators"的模式.动作创建者可以处理异步操作.他们这样做的方法是在函数周围返回一个"dispatch"包装器,这样它就可以自己调度动作.

以下是中文文章中的一个示例:
我在哪里将我的业务逻辑放在React-Redux应用程序中
(本文也与redux FAQ链接):

const fetchUser = (dispatch, id) => {
  dispatch({ type: USER_FETCH, payload: id });
  axios.get(`https://server/user/${id}`)
   .then(resp => resp.data)
   .then(user => dispatch({ type: USER_FETCH_SUCCESS, 
                            payload: user }))
   .catch(err => {
     console.error(err); // log since might be a render err
     dispatch({ type: USER_FETCH_FAILED, 
                            payload: err, 
                            error: true });
   });
};

redux-thunk以外的软件包包括:

• https://www.npmjs.com/package/redux-logic

  "所有业务逻辑和动作副作用都占有一席之地""使用redux-logic,您可以自由地用自己喜欢的JS风格编写逻辑:

  • 普通回调代码 - dispatch(resultAction)
  • promises - 返回axios.get(url).then(...)
  • async/await - result = await fetch(url)
  • observables - ob $ .next(action1)`

• 终极版,传奇

  redux-saga是一个旨在使应用程序副作用(即异步事物,如数据获取和访问浏览器缓存等不正确的事物)更易于管理,执行更高效,易于测试以及更好地处理故障的库.uses generators so make sure you're confortable using them.

• redux-observable,如果你更喜欢RxJS Observables
  这个库是由Jay Phelps创建的,这个中等文章"redux-observable"是由Ben Lesh编写的.两者都在反应社区中众所周知.

• redux-thunk为了完整性.

• 前面提到的文章中列出了其他软件包:
  我在哪里将业务逻辑放在React-Redux应用程序中

祝一切顺利 !

Answer 2

在我从事的一个项目中，我们将异步代码放在操作中，并使用称为“thunk”的“中间件”来解析对我们的减速器可以使用的对象的承诺。所有减速器被写成其采取同步方法state和action并返回一个新的state。

Answer 3

反应中的减速器的唯一目的是传递更新的状态。是的，任何 Api 调用或其他“动作”都不能在减速器中执行，这是一种反模式。您可以使用诸如 react-thunk 之类的各种异步操作模块来执行异步操作