学习react-redux，看这篇文章就够啦！

npm i redux react-redux   @types/redux-thunk  @types/redux-logger

- src
  - actions               // 存放定义 action 的文件
    - actionTypes.js      // 存放 action 类型常量的文件
    - userActions.js      // 存放用户相关的 action 创建函数的文件
    - cartActions.js      // 存放购物车相关的 action 创建函数的文件
    - ...
  - reducers              // 存放定义 reducer 的文件
    - index.js            // 根 reducer，使用 combineReducers 合并多个 reducer
    - userReducer.js      // 用户相关的 reducer
    - cartReducer.js      // 购物车相关的 reducer
    - ...
  - store                 // 存放 Redux store 相关的文件
    - index.js            // 创建 Redux store 的文件
  - components            // 存放 React 组件的文件夹
    - UserComponent.js    // 用户相关的组件
    - CartComponent.js    // 购物车相关的组件
    - ...
  - containers            // 存放包装组件（连接 Redux）的容器组件
    - UserContainer.js    // 用户相关的容器组件
    - CartContainer.js    // 购物车相关的容器组件
    - ...
  - App.js                // 主应用组件
  - index.js              // 应用入口文件

// ❌ 非法 - 默认情况下，这会改变状态！
state.value = 123

let initialState = {
  userName: "赵四",
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "SOME_ACTION_TYPE":
      // 在这里处理 action，并返回新的状态对象
      return newState;
    case "ANOTHER_ACTION_TYPE":
      // 处理另一个 action
      return newState;
    default:
      // 默认情况下，返回当前状态，不做任何改变
      return state;
  }
}

{
  type: 'PURCHASE',
  payload: {
    id: 1,
    text: 'Learn Redux',
    completed: false
  }
}

export const get_table = () => {
  return async (dispatch: Dispatch) => {
    let { data } = await instance.get("/api/table");
    console.log("触发-get_Table接口了");
    return dispatch({
      type: "get_table",
      payload: data,
    });
  };
};

import {
  combineReducers,
  applyMiddleware,
  legacy_createStore as createStore,
} from "redux";
import logger from "redux-logger"; // 打印日志插件
import thunk from "redux-thunk"; // 执行异步操作插件
import table from "./module/table/index"; // 子仓库
import user from "./module/user/index"; // 子仓库

export default createStore(
  combineReducers({ table, user }), // 合并仓库
  applyMiddleware(thunk, logger) // applyMiddleware 使用中间件
);

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store"; // 导入 Redux 的 store

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

import { useSelector } from 'react-redux';

const MyComponent = () => {
  const counter = useSelector((state) => state.counter); // 获取counter状态

  // 在组件中使用 counter 值

  return (
    // JSX
  );
};

import { connect } from 'react-redux';

const MyComponent = ({ counter }) => {
  // 在组件中使用 counter 值

  return (
    // JSX
  );
};

const mapStateToProps = (state) => ({
  counter: state.counter, // 将 counter 状态映射为组件的 props
});

export default connect(mapStateToProps)(MyComponent);

import { useStore } from 'react-redux';

const MyComponent = () => {
  const store = useStore();
  const counter = store.getState().counter; // 获取 counter 状态

  // 在组件中使用 counter 值

  return (
    // JSX
  );
};

import { combineReducers, createStore } from "redux";

import userReducer from "./userReducer"; // 用户信息的 reducer
import cartReducer from "./cartReducer"; // 购物车的 reducer
import themeReducer from "./themeReducer"; // 主题的 reducer

const rootReducer = combineReducers({
  user: userReducer,
  cart: cartReducer,
  theme: themeReducer,
});

const store = createStore(rootReducer);

export default store;

const Title = (value) => <h1>{value}</h1>;

const mapStateToProps = (state) => {
  return {
    todos: state.user, // 仓库中的用户数据
  };
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch({
        type: "SET_VISIBILITY_FILTER",
        filter: ownProps.filter,
      });
    },
  };
};

const mapDispatch: any = {
  // 属性get-table ,为组件的同名参数
  get_table: (flter: any) => ({
    type: "get_table", // type 字段为actions 类型
    flter: flter, // filter 为提交参数
  }),
};

import { bindActionCreators } from "redux";
import { addTodo, completeTodo } from "./actions";

// 创建动作创建函数的对象
const actionCreators = {
  addTodo,
  completeTodo,
};

// 获取 Redux store
// 假设你已经创建了 store 并引入了所需的动作创建函数

// 将动作创建函数与派发函数绑定
const dispatch = store.dispatch;
const boundActionCreators = bindActionCreators(actionCreators, dispatch);

// 在组件中使用绑定后的动作创建函数
// 这些函数会自动派发对应的动作到 Redux store

// 示例 1：组件中调用绑定后的动作创建函数
boundActionCreators.addTodo("Buy groceries");

// 示例 2：将绑定后的动作创建函数传递给组件的 props
// 在组件内部可以直接调用这些函数来派发动作
<MyComponent
  addTodo={boundActionCreators.addTodo}
  completeTodo={boundActionCreators.completeTodo}
/>;

import { useSelector } from 'react-redux';

const MyComponent = () => {
  const counter = useSelector(state => state.counter);
  // 在这里使用 counter

  return (
    // 组件的 JSX
  );
};

import { useDispatch } from "react-redux";

const MyComponent = () => {
  const dispatch = useDispatch();
  // 在这里使用 dispatch

  const handleClick = () => {
    dispatch({ type: "INCREMENT" });
  };

  return <button onClick={handleClick}>Increment</button>;
};

import { useStore } from 'react-redux';

const MyComponent = () => {
  const store = useStore();
  const state = store.getState();
  // 在这里使用 store 和 state

  return (
    // 组件的 JSX
  );
};

import { useActions } from 'react-redux';
import { increment, decrement } from './actions';

const MyComponent = () => {
  const { incrementAction, decrementAction } = useActions({ increment, decrement });
  // 在这里使用 incrementAction 和 decrementAction

  return (
    // 组件的 JSX
  );
};

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data);

  useEffect(() => {
    dispatch(fetchData());
  }, []);

  // 在这里使用 data

  return (
    // 组件的 JSX
  );
};

import { useSelector } from 'react-redux';
import { createSelector } from 'reselect';

const selectData = state => state.data;

const memoizedSelector = createSelector(
  selectData,
  data => data.filter(item => item.completed)
);

const MyComponent = () => {
  const filteredData = useSelector(memoizedSelector);
  // 在这里使用 filteredData

  return (
    // 组件的 JSX
  );
};