How can I share common actions in redux state slices?
Say I want to share updateField defined below in multiple slices other than profile. Should I import it from external file?
I could use extraReducers from @redux/toolkit but then I should create a new slice containing my updateField action and that action don't have state of its own. It just use the state of the slice it's imported in.
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
Thanks
You can use the extraReducers property on createSlice to listen to custom actions.
// 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
})
},
})
If you are wanting to implement a single reducer function you can certainly define it once and export/import into the slices that need it.
Example:
export const updateField = (state, { payload: { name, value } }) => ({
...state,
[name]: {
...state.data[name],
value,
},
})
Profile slice
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
},
});
User slice
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
},
});