Question

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

2020-06-18

47826

reactjs redux react-redux redux-toolkit

在我的 Redux 存储中，我有多个切片，并且我想访问 speciesSlice 内 settingsSlice 的 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

根据定义，

还原器只能访问其拥有的状态部分。因此，如果我有 {用户：用户REDUCER，帖子：postsreducer} ， userSreducer 无法访问 ports> posts State slice。 /p>

参见 “我如何在还原器之间共享状态？” 以获取更多详细信息。

。

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
    })
  }
})