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

Question

在我的 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 只能访问它们拥有的状态部分。因此，如果我有

{users: usersReducer, posts: postsReducer}

，则

usersReducer

根本无法访问

posts

状态切片。

请参阅 Redux 常见问题解答条目“如何在减速器之间共享状态？”了解更多详细信息。

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 Muhammad 的 answer 类似，但避免了必须使用 Redux 存储作为全局变量。

Answer 5

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

Answer 6

为什么大家都在制作硬代码？ 如果你想在Y切片中使用X切片的数据，你所要做的就是导出X切片的初始状态并将其导入到Y切片中，这样每当X切片状态发生变化时，它就会自动改变Y切片中的状态也切片。