如何从useSelector导入state的变量？

Question

This is my very simple 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;

It works good but how would I go about importing the ( red , green , blue ) state variables in my other components?

I did this and it doesn't work.

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

It gives me this error.

I am new to redux toolkit. How should the useSelector look like?

EDIT: This is my configureStore:

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

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

export default store;

Answer 1

Where should the.colors come from?

The color values are not further nested in a "colors" object, they can just be accessed directly, eg

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