如何使用 redux-toolkit 访问 redux 中另一个切片的状态?

Question

在我的Redux存储中，我有多个切片，我想访问speciesSlice内部设置切片的lang状态。

这是我切片的代码示例：

const settingsSlice = createSlice({
name: 'settings',
initialState: { lang: 'en', theme: 'dark' },
reducers: {
...
},
});
const speciesSlice = createSlice({
name: 'species',
initialState: data[`vds-list-${HERE I WANT TO USE THE "lang" STATE OF THE SETTINGSSLICE}`],
reducers: {
...
},
});

到目前为止，我还没有找到解决方案，所以也许这是不可能的？

我可以只使用一个切片，其中包含所有状态，但我真的很想将状态的不同部分分成不同的切片。

Answer 1

根据定义，Reducers 只能访问他们拥有的状态部分。 因此，如果我有{users: usersReducer, posts: postsReducer}，usersReducer根本无法访问posts状态片。

有关更多详细信息，请参阅 Redux FAQ 条目"如何在化简器之间共享状态？"。

Answer 2

我通过简单地导入 redux 存储对象并调用getState()方法设法实现这一目标。

因此，在speciesSlice减速器动作中，您可以做到这一点：

const speciesSlice = createSlice({
name: 'species',
initialState: data[`vds-list-${HERE I WANT TO USE THE "lang" STATE OF THE SETTINGSSLICE}`],
reducers: {
...
setLang: (state, _) => {
const reduxStore = store.getState();
const lang = reduxStore.settingsSlice.lang;
state = data[`vds-list-${lang}`];
},
...
},
});

Answer 3

我们可以通过添加extraReducers来响应action

// Slice A - sliceA.js
export const sliceAinitialState = {
lang: 'en',
}
const sliceA = createSlice({
name: 'A'
initialSlice: sliceAinitialState,
reducers: {
langChangedAtSliceA: (state, action) => state.lang = action.payload,
}
})
export const {langChangedAtSliceA } = sliceA.actions
// Slice B - sliceB.js
import {sliceAinitialState, langChangedAtSliceA} from 'sliceA.js'
const sliceB = createSlice({
name: 'B'
initialSlice: {
lang: sliceAinitialState.lang
},
extraReducers: (builder) => {
builder.addCase(langChangedAtSliceA, (state, action) => {
state.lang = action.payload
})
}
})

Answer 4

如 Redux FAQ 条目"如何在两个化简器之间共享状态？"中所述，您可以使用 redux-thunk 编写可以访问整个状态的化简器。例如：

const speciesSlice = createSlice({
name: 'species',
initialState: data[`vds-list-${HERE I WANT TO USE THE "lang" STATE OF THE SETTINGSSLICE}`],
reducers: {
...
internalSetLang: (state, action) => {
state = data[`vds-list-${action.payload}`];
},
...
},
});
const { internalSetLang } = speciesSlice.actions;
export function setLang() {
return (dispatch, getState) => {
const lang = getState().settings.lang;
dispatch(internalSetLang(lang));
};
}

这类似于@Biskrem穆罕默德的回答，但避免了必须将 Redux 存储用作全局变量。

Answer 5

redux-toolkit 中有一个特定的 createDraftSafeSelector 函数可用于该用途。