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

Question

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

我知道对于 API 调用或类似的东西，约定是使用中间件，但它总是必要的吗？(它添加了很多样板)。

我成功地在化简器中添加了一个异步方法来管理设备 API 连接，例如应用内或本地通知，但我想知道是否可以以这种方式处理它。

例如，在我的减速器中有这种方法：

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

是的。减速剂不应有任何副作用。 化简器需要是纯函数，reux 才能高效工作。 这里有几个链接试图解释为什么 redux 需要化简器是纯函数，以及为什么纯化简器在 redux 中如此重要。

正如其他人所指出的那样，thunk 中间件是处理 react 异步的常用方法。

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

以下是来自 Medium 文章的一个例子：
我应该将我的业务逻辑放在 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风格：'

  • 纯回调代码 - 调度(结果操作)
  • 承诺 - 返回 axios.get(url).then(...)
  • async/await - result = await fetch(url)
  • observables - ob$.next(action1)'

• redux-saga

  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

react 中的化简器的唯一目的是传递较新的状态。 是的，任何 API 调用或其他"操作"都不能在化简器中执行，它是一种反模式。 您可以使用各种异步操作模块(如 react-thunk)来执行异步操作