¿Cómo puedo compartir acciones comunes en segmentos de estado redux?
Digamos que quiero compartir updateField definido a continuación en varios segmentos que no sean profile . ¿Debo importarlo desde un archivo externo?
Podría usar extraReducers de @redux/toolkit pero luego debería crear un nuevo segmento que contenga mi acción updateField y esa acción no tiene un estado propio. Simplemente usa el estado del segmento en el que se importa.
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.actionsGracias
Puede usar la propiedad extraReducers en createSlice para escuchar acciones personalizadas.
// 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 }) }, })Si desea implementar una sola función reductora, ciertamente puede definirla una vez y exportar/importar en los segmentos que lo necesiten.
Ejemplo:
export const updateField = (state, { payload: { name, value } }) => ({ ...state, [name]: { ...state.data[name], value, }, })Rebanada de perfil
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 }, });Sector de usuario
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 }, });