react-store(react18+)-同步和异步操作仓库

依赖版本："react-redux": "^9.2.0","redux": "^5.0.1","redux-thunk": "^3.1.0"

文件：store/index.ts、 store/infoStatus/.、page1.tsx

store/index.ts

// import reducer from "./reducer";
// window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()？？？？
// const store = legacy_createStore(
//   reducers,
//   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
// );

import {
  legacy_createStore,
  combineReducers,
  applyMiddleware,
  compose,
} from "redux";
import { thunk } from "redux-thunk";
import infoStatus from "./infoStatus/reducer.ts";
//模块化 reducers 合并交给 store 管理
const reducers = combineReducers({ infoStatus });

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION__COMPOSE__({})
  : compose;
//创建仓库,  composeEnhancers(applyMiddleware(thunk)) 实现异步功能
const store = legacy_createStore(
  reducers,
  composeEnhancers(applyMiddleware(thunk))
);
export default store;

store/infoStatus/. 每个reducers 独自维护

业务逻辑文件index.ts

文件reducers.ts

import infoStatus from "./index";

const reducer = (
  state = { ...infoStatus.state },
  action: { type: string; val: number }
) => {
  const newState = JSON.parse(JSON.stringify(state));
//默认使用 switch...case
  // switch (action.type) {
  //   case "add":
  //     newState.num++;
  //     break;
  //   case "reduce":
  //     newState.num--;
  //     break;
  // }
//动态处理封装转化switch...case实现
  //拿到 infoStatus.actionNames 收集 actions 内的方法名 遍历实现actions对应方法
  for (const key in infoStatus.actionNames) {
    //如果 dispath 传过来的 type 和 infoStatus.actionNames 里的方法一直，则调用 infoStatus.actions 的方法
    if (action.type === infoStatus.actionNames[key]) {
      //调用 infoStatus.actions 的方法
      infoStatus.actions[infoStatus.actionNames[key]](newState, action);
      break;
    }
  }
  return newState;
};
export default reducer;

使用的文件 page1.tsx

import { useSelector, useDispatch } from "react-redux";
import infoStatus from "../../store/infoStatus";

function Page1() {
  const { num } = useSelector((state: RooState) => ({
    num: state.infoStatus.num,
  }));
  const dispatch = useDispatch();
  const clockNumAdd = () => {
    //同比直接使用 dispatch
    dispatch({ type: "add", val: 100 }); //同步
  };
  const clockNumAdd2 = () => {
    // dispatch({ type: "add" });
    //异步，这里使用了 infoStatus.asyncActions 定义的方法
    dispatch(infoStatus.asyncActions.asyncAdd as any);
  };
  return (
    <div>
      <p>Page {num} </p>
      <button onClick={clockNumAdd}>添加</button>
      <button onClick={clockNumAdd2}>异步添加</button>
    </div>
  );
}
export default Page1;

最后别忘了，入口文件 main.tsx引入 store

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "reset-css";
import "@/assets/styles/global.scss";
// import Router from "./router";
import App from "./App.tsx";
import {  Provider } from 'react-redux'
import store from './store'

createRoot(document.getElementById("root")!).render(
  <Provider store={store}>
  <StrictMode>
    {/* 组件式 */}
    {/* <Router /> */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
  </Provider>
);