React使用Redux实现组件通信的项目实践

npm install @reduxjs/toolkit react-redux

src/
  store.ts
  features/
    counter/
      counterSlice.ts
      CounterA.tsx
      CounterB.tsx
  App.tsx
  index.tsx
  hooks.ts

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./features/counter/counterSlice";

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

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { RootState } from "../../store";

interface CounterState {
  value: number;
}

const initialState: CounterState = { value: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    addBy: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

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

// 选择器
export const selectCount = (state: RootState) => state.counter.value;

import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "./store";

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

import React from "react";
import { useAppDispatch } from "../../hooks";
import { increment, addBy } from "./counterSlice";

export default function CounterA() {
  const dispatch = useAppDispatch();

  return (
    <div style={{ border: "1px solid #ccc", padding: 10, margin: 10 }}>
      <h3>我是 CounterA</h3>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(addBy(5))}>+5</button>
    </div>
  );
}

import React from "react";
import { useAppSelector } from "../../hooks";
import { selectCount } from "./counterSlice";

export default function CounterB() {
  const count = useAppSelector(selectCount);

  return (
    <div style={{ border: "1px solid #ccc", padding: 10, margin: 10 }}>
      <h3>我是 CounterB</h3>
      <p>当前计数：{count}</p>
    </div>
  );
}

import React from "react";
import CounterA from "./features/counter/CounterA";
import CounterB from "./features/counter/CounterB";

export default function App() {
  return (
    <div style={{ padding: 20 }}>
      <h2>Redux 通信 Demo</h2>
      <CounterA />
      <CounterB />
    </div>
  );
}

import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";

const root = createRoot(document.getElementById("root")!);
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);