使用 createSlice 部分重置状态

Question

我正在执行一项操作，应该对某些状态属性进行部分重置。

在转向 redux-toolkit 之前，我已经使用以下代码实现了这一点：

初始状态

const initialState = {
    username: null,
    dateOfBirth: null,
    homeTown: null,
    address: null,
    postCode: null,
    floor: null,
}

减速器

switch (action.type) {
    ...
    case USER_SET_HOME_TOWN:
        return {
            ...initialState,
            homeTown: action.payload
            username: state.userName,
            dateOfBirth: state.dateOfBirth,
        };
    ...
    default:
      return state;
}

USER_SET_HOME_TOWN 每次 homeTown 发生变化时都会发送并维护用户名和出生日期，同时将其他所有内容返回给 initialState。

现在使用 redux 工具包和 createSlice 我试图通过编写如下内容来实现类似的行为：

createSlice - 不工作

const user = createSlice({
    name: 'user',
    ...
    reducers: {
        ...
        userSetHomeTown: {
            reducer: (state, action) => {
                state = { ...initialState };
                state.homeTown = action.payload;
                state.username = state.payload;
                state.dateOfBirth = state.dateOfBirth;
            },
        },
        ...
    },
});

这是行不通的，我想这是有道理的，因为 state = { ...initialState}; 重置了 state 并且 state.username/dateOfBirth: state.username/dateOfBirth; 有点没用并且适得其反......或者干脆只是错了。

将其更改为：

createSlice - 工作

const user = createSlice({
    name: 'user',
    ...
    reducers: {
        ...
        userSetHomeTown: {
            reducer: (state, action) => ({
                ...initialState,
                homeTown: action.payload,
                username: state.payload,
                dateOfBirth: state.dateOfBirth,
            }),
        },
        ...
    },
});

确实有效，但我仍然想知道这是否是推荐的正确方法。

Answer 1

是的，没错。

请记住，Immer 通过改变现有状态对象 (state.someField = someValue) 或返回一个全新的值来工作你一成不变地构建了自己。

只是做 state = initialState 两者都不是。它所做的只是将局部变量 state 指向不同的引用。

这里的另一个选项是 Object.assign(state, initialState)，它会覆盖 state 中的字段，从而改变它。

使用 createSlice 部分重置状态

Partial reset of state with createSlice

reactjs

redux

redux-toolkit