如何从useSelector导入状态变量？

Question

这是我非常简单的减速器：

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;

Answer 1

.colors 应该从哪里来？

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

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

如何从useSelector导入状态变量？

How to import variables of state from useSelector?

javascript

reactjs

redux

react-redux

redux-toolkit