行动后分派行动

Question

我有个人用户，其热情值可以是 in/decremented。在此之后，我还想更新整体热情水平 (globalEnthusiasmLevel)，个人热情整数的总和（每个用户）。

我拥有在处理单个值时更新整体值所需的一切信息（操作 > 减速器），但是为了练习目的，我希望它是一个单独的操作。

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

在动作之后调度动作的最佳方法是什么？
将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组件中使用时，不把它们存储在store中，而是在mapStateToProps中计算怎么样？这对你来说会更容易。

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

行动后分派行动

Dispatch action after action

action

dispatch

reactjs

redux