1. 引入依赖

npm install redux react-redux redux-thunk --save

2.创建文件夹redux

redux包括action、reducer和store.js

• action

export const getSiteInfo = (params) => ({
  type: "getSiteInfo",
  params,
});

• reduce

const init ={
  siteInfo: localStorage.get("siteInfo") || [],
}

export default (state=init,action)=>{
    cosnt {type,params}=action;
    switch (type) {
        case "getSiteInfo":
          return { ...state, siteInfo: params };
        default:
          return state;
     }
}

• store.js

    import { createStore, applyMiddleware, compose } from "redux";
    import thunk from "redux-thunk";
    import reducer from "./reducer";
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
      : compose;

    const enhancer = composeEnhancers(applyMiddleware(thunk));
    const store = createStore(reducer, enhancer);

    export default store;

3.main.jsx引入

import { Provider } from "react-redux";

<Provider store={store}>
 {路由组件}
/Provider>

4.页面使用

import { useDispatch,useSelector} from "react-redux";

const dispatch = useDispatch();
const num = useSelector(state => state.num);

 dispatch(getSiteInfo(值));