一.安装redux、react-redux

yarn add redux
yarn add react-redux

二.创建文件

创建stores文件夹，在stores文件夹下创建index.ts、action.ts、reducer.ts(若是js改下后缀名就行)

 index.ts:

import { createStore } from "redux";
import reducer from "./reducer";

const store = createStore(reducer);

export default store;

 action.ts:

export interface ActionType {
  type: string;
  value: any;
}

export const addRouters = (value): ActionType => {
  return {
    type: "add_Routers",
    value,
  };
};

reducer.ts:

import { ActionType } from "./action";

const reducer = (state, action: ActionType) => {
  switch (action.type) {
    case "add_Routers":
      state = action.value;
      return state;
    default:
      return state;
  }
};

export default reducer;

三.全局注册

app.tsx:

使用Provider包裹App.tsx组件，注入store

import "./App.css";
import React from "react";
import Routes from "./routes/index";
import store from "./stores";
import { Provider } from "react-redux";
const App = () => {
  return (
    <Provider store={store}>
      <Routes></Routes>
    </Provider>
  );
};

export default App;

四.发送action

import { useDispatch } from "react-redux";
import { addRouters } from "../../stores/action";


//下面两句要放在函数组件内
const dispatch = useDispatch();
dispatch(addRouters(data.routers))

五.接收state

import { useSelector } from "react-redux";

//这一句同样要放在函数组件内
const routers: any = useSelector((state) => state);

总结：主要运用了useDispatch、useSelector这两个Hook实现了react组件间的数据共享代替了老版的conncet