如何将 Redux Toolkit 的 createSlice 创建的 Redux 操作传递到 React Native 中的屏幕

Question

在我的 React Native 应用程序中，我有一个通用设置屏幕，向用户显示一个问题和一个选项列表。问题和选项作为导航参数传递到屏幕（我使用的是 react-navigation v5 以及 useNavigation 和 useRoute 挂钩）。

我希望此设置屏幕在用户单击某个选项时更新我的 redux 状态。但是，要调度的操作应该是基于所问问题的动态。我有一系列通过 Redux Toolkit 的 createSlice 生成的操作。我已经像这样导出了这些操作：

export const { changeColorScheme, changeDefaultUnits } = slice.actions;

我最初尝试将这些操作作为导航参数传递到设置屏幕，但收到“在导航状态中发现不可序列化的值”警告。

此后我尝试将操作名称作为导航道具传递，并且在设置屏幕中我尝试使用

调度操作

const dispatch = useDispatch();
const route = useRoute();
[...]
dispatch({
  type: route.params.actionName, // eg "changeColorScheme"
  payload: theOptionTheUserSelected // eg "dark"
})

后一种方法似乎根本不会触发 action/reducer。我想知道是否与 Redux Toolkit 创建和导出操作的方式有关，这意味着它们不能以这种方式分派？

我错过了什么吗？有没有其他方法可以实现相同的结果？

Answer 1

基于该警告，我假设 React-Navigation 的“导航状态”实际上保存在 Redux 存储中。 You should not put non-serializable values like functions into the store state，因此 RTK 对此发出警告。

对于调度问题，现在是使用 Redux DevTools 查看正在调度的操作的绝佳时机，包括具体的操作类型字符串是什么。

请注意，createSlice 生成的操作类型是包含两部分的字符串，分别基于切片名称和缩减器名称。因此，它可能需要类似于 "settings/changeColorScheme"，而不是 "changeColorScheme"。请务必使用操作创建者的 type 字段中的值，例如 changeColorScheme.type，以在此处获得正确的值。

如何将 Redux Toolkit 的 createSlice 创建的 Redux 操作传递到 React Native 中的屏幕

How do I pass a Redux action created by Redux Toolkit's createSlice to a screen in React Native

react-native

redux

react-navigation

redux-toolkit