行动后的派遣行动

Question

我有个人用户可以输入/减少热情值。在此之后，我想要更新整体热情等级（globalEnthusiasmLevel）以及个人热情整数（每个用户）的总和。

我有一些我需要知道的事情来更新处理单个值时的整体值（action> reducer），但是为了练习的目的，我希望它是一个单独的动作。

export function enthusiasm(state: StoreState, action: UsersAction): StoreState {

  let globalEnthusiasmLevel: number;

  switch (action.type) {

    case INCREMENT_ENTHUSIASM:

      state.users = state.users.map((user: UserType) => {

        if (user._id === action.payload._id) {
          user.enthusiasmLevel = user.enthusiasmLevel + 1;
        }

        return user;
      });

      globalEnthusiasmLevel = state.globalEnthusiasmLevel + 1;
      return { ...state, globalEnthusiasmLevel };

    case DECREMENT_ENTHUSIASM:

      const users: UserType[] = state.users.map((user: UserType) => {

        if (user._id === action.payload._id) {
          globalEnthusiasmLevel = (user.enthusiasmLevel > 0 ) ? state.globalEnthusiasmLevel - 1 : state.globalEnthusiasmLevel;

          user.enthusiasmLevel = user.enthusiasmLevel - 1;
          user.enthusiasmLevel = Math.max(0, user.enthusiasmLevel);
        }

        return user;
      });

      return { ...state, ...users, globalEnthusiasmLevel };

    case STORE_USERS:
      return { ...state, users: action.payload };

    case SET_GLOBAL_ENTHUSIASM:
      return { ...state, globalEnthusiasmLevel: action.payload };

    default:
      return state;
  } 

1. 在行动之后派遣行动的最佳方法是什么？
2. 把STORE_USERS和SET_GLOBAL_ENTHUSIASM分成不同的减速器是明智的吗？

Answer 1

1 - 你可以写一个middleware来处理动作类型INCREMENT_ENTHUSIASM和DECREMENT_ENTHUSIASM的副作用。以下示例是在ES6中编写的，因此您需要转换为Typescript。

const middleware = store => next => action => {
  next(action);
  switch (action.type) {
    case INCREMENT_ENTHUSIASM:
      store.dispatch({
        type: INCREMENT_GLOBAL_ENTHUSIASM // increment global value
      });
      break;
    case DECREMENT_ENTHUSIASM:
      store.dispatch({
        type: DECREMENT_GLOBAL_ENTHUSIASM // decrement global value
      });
      break;
    default:
      break;
  }
}

...
import { createStore, combineReducers, applyMiddleware } from 'redux';

const store = createStore(
  combineReducers({
    enthusiasm
  }),
  applyMiddleware(middleware)
);

但是如果可以根据所有用户的热情水平计算globalEnthusiasmLevel，那么如果不将它们存储在商店中，如何在需要在React组件中使用时在mapStateToProps中进行计算呢？这对你来说会更容易。

2 - 如果您打算将globalEnthusiasmLevel存储在不同的减速器中，那么它应该是。但请看上面我的观点，不是存储而是计算它。