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

Question

如何在 redux 状态片中共享常用操作？

假设我想在 profile 以外的多个切片中共享下面定义的 updateField。我应该从外部文件导入它吗？

我可以使用 @redux/toolkit 中的 extraReducers，但我应该创建一个包含我的 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

您可以在 createSlice 上使用 extraReducers 属性来收听自定义操作。

// 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
    })
  },
})

Answer 2

如果你想实现一个单一的 reducer 函数，你当然可以定义它一次，然后 export/import 到需要它的切片中。

示例：

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

个人资料切片

import { createSlice } from '@reduxjs/toolkit';
import { updateField } from '../path/to/updateField'; // <-- import

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

const slice = createSlice({
  name: 'profile',
  initialState: INITIAL_STATE,
  reducers: {
    updateField, // <-- pass to reducers object
  },
});

用户切片

import { createSlice } from '@reduxjs/toolkit';
import { updateField } from '../path/to/updateField'; // <-- import

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

const slice = createSlice({
  name: 'user',
  initialState: INITIAL_STATE,
  reducers: {
    updateField, // <-- pass to reducers object
  },
});

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

Share actions between slices with Redux Toolkit

javascript

reactjs

redux

redux-toolkit