无法访问 Redux 中切片的初始状态，所以我不得不求助于手动设置状态属性

Question

>我有一个名为modal的切片，它负责显示和隐藏模态，使用操作showModal和hideModal。

下面是它的样子：

export const modal = createSlice({
slice: "modal",
initialState: {
visible: false,
selectedExpenseId: null
},
reducers:{
showModal: (state, { payload }) => (
state = {
visible: true,
selectedExpenseId: payload
}
), 
hideModal: (state, {payload}) => (state = state.initialState) 
//hideModal: (state, {payload}) => (state = {visible: false, selectedExpenseId: null}) 
}
});

showModal按预期工作，但是当我调用hideModal时没有任何反应，因为我似乎无法以这种方式访问initialState。 当我求助于以预期方式手动分配值的注释掉行时，它可以工作。

我想知道我做错了什么，因为我显然更愿意正确地访问initialState。我是 React 和 redux 的新手，所以我确信我可能只是在这里错过了一些明显的东西。

干杯。

Answer 1

您的两个化简器当前都是错误的。 您只是偶然看到showModal的"正确"行为。

看起来您正在使用 Redux 初学者工具包。 由于它在内部使用 Immer，因此有两种方法可以更新状态：

1. "改变"state值内的内容
2. 自己创建一个新的不可变更新值，并将其返回。

您的两个减速器实际上都没有正确执行此操作。

在化简器内部赋值state = something不会改变state的内容，也不会返回新值。 相反，它只是更改此函数中局部变量state指向的内容。

此外，没有state.initialState字段。

如果showModal正常工作，那只是偶然的，可能是因为赋值语句也隐式返回赋值的结果。

你应该做的是这样的：

const initialState = {
visible: false,
selectedExpenseId: null
};
export const modal = createSlice({
slice: "modal",
initialState,
reducers: {
showModal(state, {payload}) {
return {visible: true, selectedExpenseId: payload};
},
hideModal(state) {
return initialState;
}
}
});

请注意，您也可以编写如下化简器：

showModal(state, {payload}) {
state.visible = true;
state.selectedExpenseId = payload;
}

(来源：我是一名 Redux 维护者，我写了 Redux 入门工具包。

Answer 2

在 Redux 的文档中没有提到您将在名为initialState的state中收到一个包含初始状态的属性。

Redux 不会单独填充state对象中的任何属性，除非您在reducers中或通过initialState执行此操作。 您可以通过多种方式实现您在问题本身中提到的 1 所需的行为。 如果要通过initialState访问它，则可以遵循以下逻辑：

const initialState = {
visible: false,
selectedExpenseId: null
};
export const modal = createSlice({
slice: "modal",
initialState: {...initialState},
reducers:{
showModal: (state, { payload }) => (
state = {
visible: true,
selectedExpenseId: payload
}
), 
hideModal: (state, {payload}) => (state = {...initialState}) 
}
});

我们使用扩展符号(三点 {...}(来避免原始initialState对象的突变。