Redux-Toolkit -如何将状态传递给子组件

// 在状态切片中定义状态和reducer
import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    count: 0,
  },
  reducers: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

// 在父组件中使用useSelector获取状态
import React from "react";
import { useSelector } from "react-redux";

const ParentComponent = () => {
  const count = useSelector((state) => state.counter.count);

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent count={count} />
    </div>
  );
};

export default ParentComponent;

// 子组件接收父组件传递的状态
import React from "react";

const ChildComponent = ({ count }) => {
  return <p>Received Count: {count}</p>;
};

export default ChildComponent;