如何从 useSelector 导入状态变量？答案

【问题标题】：How to import variables of state from useSelector?如何从 useSelector 导入状态变量？
【发布时间】：2020-12-16 07:43:23
【问题描述】：

这是我非常简单的reducer：

import { createSlice } from "@reduxjs/toolkit";

const initState = {
  red: 0,
  green: 0,
  blue: 0,
};

const colorSlice = createSlice({
  name: "color",
  initialState: initState,
  reducers: {
    controlRed(state, action) {
      state.red = action.payload;
    },
    controlGreen(state, action) {
      state.green = action.payload;
    },
    controlBlue(state, action) {
      state.blue = action.payload;
    },
  },
});

export const { controlRed, controlGreen, controlBlue } = colorSlice.actions;

export default colorSlice.reducer;

效果很好，但我将如何在其他组件中导入 (red、green、blue) 状态变量？

我这样做了，但它不起作用。

  const { red, green, blue } = useSelector((state) => state.colors);

它给了我这个错误。

我是 redux 工具包的新手。 useSelector 应该是什么样子？

编辑：这是我的 configureStore：

import { configureStore } from "@reduxjs/toolkit";
import reducer from "./color";

const store = configureStore({
  reducer: reducer,
});

export default store;

【问题讨论】：

当您将它传递给combineReducers 时，您在根减速器中导入并命名该减速器是什么？我相信状态切片会有那个的名字。你能包括那个代码吗？你安装了 redux-dev-tools 和浏览器扩展吗？这可以帮助您了解状态的形状和结构。
@DrewReese 我正在使用 configureStore，所以我不需要担心 combineReducers 。我在最后添加了代码。
@DrewReese 是的，我已经安装了浏览器扩展，并且正在使用 redux 工具包
对，好吧，我还是更熟悉旧的 react-redux（但正在追赶）。如果我不得不猜测，它是 reducer 函数的名称，类似于 const { red, green, blue } = useSelector((state) => state.color); 而不是 colors。这似乎是一个简单的错字。
是的，我也试过了，但它不起作用并给出了同样的错误。我正在浏览文档，也许我会在那里找到一些东西。

标签： javascript reactjs redux react-redux redux-toolkit

【解决方案1】：

.colors 应该从哪里来？

颜色值不会进一步嵌套在“颜色”对象中，它们可以直接访问，例如

  const { red, green, blue } = useSelector((state) => state);

【讨论】：

这行得通。非常感谢。我现在看到了问题。