是否可以在 redux 中使用 reducer 进行后端调用？

Question

我正在建立一个 angular 网站。通常我在 onInit 方法中进行后端调用并将数据存储在组件状态中。现在我想将 redux 添加到我的网站。我应该只对 onInit 方法提出操作并在 redux reducer 中进行实际的后端调用，还是应该在我的组件 onInit 方法中进行后端调用并稍后将数据添加到 redux 状态？哪一个是正确的做法？我听说 redux reducer 应该是纯函数那么做后端调用是否使函数不纯？

Answer 1

是的，您不应该在 reducer 中进行 api 调用，因为它们应该是纯净的并且没有任何副作用。

Should I make backend call in my component onInit method and add the data to redux state later on?

我建议采用这种方法。

Answer 2

你不应该在减速器中进行后端调用。 Redux docs say:

The reducer is a pure function that takes the previous state and an action, and returns the next state

并且：

No side effects. No API calls. No mutations. Just a calculation.

Redux 中的副作用可以通过 redux-thunk, redux-saga 完成，或者在普通 Redux 中间件中进行副作用调用。

在这些选项中，redux-thunk 最容易上手。它允许您在操作中执行 async/side-effects。

// store.js
import thunk from 'redux-thunk';
const myReduxStore = createStore(myRootReducer, applyMiddleware(thunk));

// actions.js
const myAction = (someArg) => {
  return dispatch => {
    myApiCall().then(result => {
      dispatch({ type: 'YAY_SUCCESS', result })
    })
  }
}

然后当你发送动作时

dispatch(myAction())

异步副作用将在调度调用之后但在 reducer 执行操作之前发生。

是否可以在 redux 中使用 reducer 进行后端调用？

Is it ok to make backend call using reducer in redux?

redux

angular

redux-store

ngredux