更新 redux 商店上的 isLoading 字段

Question

我有指示我的应用程序正在加载的微调器。我的应用程序中的许多减速器都需要能够将此加载器设置为 true 或 false。

我的假设： 该字段需要位于状态树的最顶层。我们称它为 isLoading.

问题： Redux reducers 更新它们自己的状态树部分。我可以通过哪些方式构建我的 reducer 以更新最顶层的 isLoading 字段？

我对 redux-thunk 很熟悉，但是在每个操作上都发送一个事件似乎有点矫枉过正。但也许我错了，这是正确的做法。另外，我当然有可能错误地设计了我的状态树。

作为参考，我目前正在使用 redux thunk：

export const fetchAssets = () => {
  return dispatch => {
    request
      .get('http://myapi.com/assets')
      .set('Accept', 'application/json')
      .end(function(err, res){
        if (err) {
          return dispatch(fetchAssetsFailure(err));
        }
        dispatch(fetchAssetsSuccess(res.body.data));
      });
  }
}

Answer 1

Reducer 接收所有分派的操作，因此您希望 isLoading reducer 对每个相关操作做出反应，而不是其他 reducer 设置此值。显然，您不能使用 action.type 因为您无法预测所有相关操作，而且它会创建一个非常麻烦的 reducer。你可以做的是在 action 中添加另一个字段，这个 reducer 将对该字段做出反应。

示例操作创建者：

const createSampleAction = (payload, isLoading) => ({
    type: 'SAMPLE_ACTION',
    payload,
    meta: {
        isLoading
    }
});

和减速器：

const isLoadingReducer = (state = false, { meta }) => {
  const isLoading = meta && meta.isLoading;

  if (isLoading !== undefined) {
      return isLoading;
  }

  return state;
}

如果您不喜欢使用 meta 而不是 action 类型的 reducer，您可以创建一个中间件来执行相同的操作属性来分派 showLoading / hideLoading 操作，reducer 会做出反应对于这些操作：

const isLoadingMiddleware = ({ dispatch }) => next => {
  next(action);
  const isLoading = action.meta && action.meta.isLoading;

  if (isLoading !== undefined) {
      dispatch(isLoading ? showLoading () : hideLoading());
  }
}

更新 redux 商店上的 isLoading 字段

Updating isLoading field on a redux store

javascript

reactjs

redux

redux-thunk