Question

我有微调器，表明我的应用正在加载。我的应用程序中的许多reducer需要能够将此加载程序设置为true或false。

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

问题： Redux reducer更新自己的状态树部分。有哪些方法可以构建我的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

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

示例动作创建者：

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

如果您对使用元而不是操作类型的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商店

1 个答案: