使用 Redux Toolkit 在切片之间共享操作

Question

如何共享 redux 状态切片中的常见操作？

假设我想在多个切片中共享updateField下面定义的内容，而不是profile. 我应该从外部文件导入它吗？

我可以使用extraReducersfrom@redux/toolkit但然后我应该创建一个包含我的updateField操作的新切片，并且该操作没有自己的状态。它只使用导入的切片的状态。

import { createSlice } from '@reduxjs/toolkit';

export const INITIAL_STATE = { title: { value: '' } }

const slice = createSlice({
  name: 'profile',
  initialState: INITIAL_STATE,
  reducers: {

    updateField: (state, { payload: { name, value } }) => ({
      ...state,
      [name]: {
        ...state.data[name],
        value,
      },
    }),

  },
})

export const {
  updateField,
} = slice.actions

谢谢

Answer 1

您可以使用extraReducerson 属性createSlice来侦听自定义操作。

// actions
export const incrementBy = createAction<number>('incrementBy')

// reducers

const counter1 = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    decrement: (state) => state - 1,
  },
  // "builder callback API"
  extraReducers: (builder) => {
    builder.addCase(incrementBy, (state, action) => {
      return state + action.payload
    })
  },
})

const counter2 = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    decrementByTwo: (state) => state - 2,
  },
  // "builder callback API"
  extraReducers: (builder) => {
    builder.addCase(incrementBy, (state, action) => {
      return state + action.payload
    })
  },
})