**问题:**我想更有效地编写一些代码。
下面是Redux Toolkit切片的完整代码示例
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;
我不想每次运行Reducer时都写入setCookie(name,value)。
相反,我想写一次,每次调用reducer函数时都调用它。
我将传递以下有效负载:
{type: string, value: string}
然后从每个reducer运行回调,并调用**setCookie(...)**函数,如下所示:
setCookie(action.payload.type, action.payload.value)
理想情况下,我会在切片中这样编写代码
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)
}
});
有没有一种方法可以达到这个目的?或者是另一种思考方式?
我的主要目标是将表单值存储在cookie中,以便在每次客户访问时预填充注册表单。
没有身份验证。
我不会在组件中编写cookie存储逻辑!
感谢您的关注,祝您度过愉快的一天:)
1条答案
按热度按时间k4aesqcs1#
您是否考虑过传递中间件函数?您可以创建自己的定制中间件,如下所示
然后将其连接为默认值
https://redux-toolkit.js.org/api/configureStore#middleware