对 redux 工具包的 createSlice 中的多个操作做出反应

Question

我正在重构我的减速器以使用 redux-toolkit 的 createSlice。现在我有一个非常基于事件的减速器，有时需要对不同的操作进行类似的状态更新 . 使用原始 switch/case 语句，这不是问题：

        case ActionTypes.CREATION_CANCELLED:
        case ActionTypes.NEW_MARKER_INFOWINDOW_CLOSED:
        case ActionTypes.MARKER_SELECTED:
            return {...state, isCreating: false};

createSlice 函数可以实现这种行为吗？

Answer 1

您可以使用 the extraReducers "builder callback" notation. With this notation you create a reducer by adding cases to a builder object. The first argument of the builder.addMatcher 函数确定哪些操作类型与这种情况匹配。

如果您的操作共享通用的字符串格式，您可以使用像 action.type.endsWith('/rejected') 这样的基于字符串的匹配器以相同的方式处理所有 rejected 操作。

否则，您可以定义自己的自定义匹配器函数，该函数接受一个 action 和 returns 一个 boolean 来判断它是否匹配。

由于我们要匹配多种动作类型，我们可以为此创建一个帮助器。

// helper function to match any actions in a provided list
// actions can be `string` types or redux-toolkit action creators
const isAnyOf = (...matchers: Array<string | { type: string }>) => 
  ( action: AnyAction ) =>
    matchers.some((matcher) =>
      typeof matcher === "string"
        ? matcher === action.type
        : matcher.type === action.type
    );

我们可以将其与您现有的 string 常量一起使用：

const slice = createSlice({
  name: "some name",
  initialState: {
    someProp: [],
    isCreating: false
  },
  reducers: {},
  extraReducers: (builder) => {
    return builder.addMatcher(
      isAnyOf(
        ActionTypes.CREATION_CANCELLED,
        ActionTypes.NEW_MARKER_INFOWINDOW_CLOSED,
        ActionTypes.MARKER_SELECTED
      ),
      (state, action) => {
        state.isCreating = false;
      }
    );
  }
});

或者使用 Redux Toolkit 动作创建者：

const creationCancelled = createAction("CREATION_CANCELLED");
const newMarkerInfoWindowClosed = createAction("NEW_MARKER_INFOWINDOW_CLOSED");
const markerSelected = createAction("MARKER_SELECTED");

const slice = createSlice({
  name: "some name",
  initialState: {
    someProp: [],
    isCreating: false
  },
  reducers: {},
  extraReducers: (builder) => {
    return builder.addMatcher(
      isAnyOf(creationCancelled, newMarkerInfoWindowClosed, markerSelected),
      (state, action) => {
        state.isCreating = false;
      }
    );
  }
});

对 redux 工具包的 createSlice 中的多个操作做出反应

react to multiple actions in redux toolkit's createSlice

reactjs

redux

redux-toolkit