Callback after state update in Reducer of Redux Toolkit - reactjs

Question

Problem: I want to write some code more efficiently.
Below you will find my full code example of a Redux Toolkit slice
import { createSlice } from '#reduxjs/toolkit';
import { setCookie } from '../../utils/storageHandler';
const initialState = {
name: null,
age: null
}
const formSlice = createSlice({
name: 'formSlice',
initialState: initialState,
reducers: {
setName(state, action) {
state.name = action.payload;
setCookie('name', action.payload);
},
setAge(state, action) {
state.age = action.payload;
setCookie('age', action.payload);
}
}
});
export const { setName, setAge, } =
formSlice.actions;
export default formSlice.reducer;
I do not want to write setCookie(name, value) each time I run a reducer.
Rather I want to write it once and call it each time a reducer function has been called.
I would pass a payload of:
{type: string, value: string}
and then run a callback from every reducer and call the setCookie(...) function as follows:
setCookie(action.payload.type, action.payload.value)
Ideally I would write this code within the slice as so
const formSlice = createSlice({
name: 'formSlice',
initialState: initialState,
reducers: {
setName(state, action) {
state.name = action.payload;
},
setAge(state, action) {
state.age = action.payload;
}
},
callback(action) {
setCookie(action.payload.type, action.payload.value)
}
});
Is there a way of achieving this?
Or maybe an another way of thinking?
My main goal is to have form values stored within cookies, so as to prefill the registration form each time a customer visits it.
There is no authentication.
I will not write cookie storage logic within a component!
Thank you for your attention and I wish you a pleasant day :)

Answer 1

Have you looked into passing a middleware function? You can create your own custom middleware like this
const saveForm = (api: MiddlewareAPI) => (next) => (action) => {
if (action.type === 'setName') { ... }
if (action.type === 'setAge') { ... }
return next(action);
}
and then concat it to the default
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(saveForm),
})
https://redux-toolkit.js.org/api/configureStore#middleware