react-redux

1.src下新建store文件夹,及index.js和reducer.js文件

(1)index.js

//引入插件
import { createStore } from "redux"
//引入reducer
import reducer from "./reducer"
//保存
const store = createStore(reducer);
//抛出
export default store;

引入中间件后：【添加中间件，只需要在此文件设置，其它文件不需要更改】

//引入插件
import { createStore, applyMiddleware } from "redux"
//引入reducer
import reducer from "./reducer"
/*
  1.store:redux本身自己的对象
  2.action:dispatch的参数
  3.next:将要执行的dispatch
*/
const logMiddleware = (store) => (next) => (action) => {
        console.log("修改前", store.getState());
        console.log("修改参数", action);
        next(action);
        console.log("修改后", store.getState())
    }
    //保存
const store = createStore(reducer, applyMiddleware(logMiddleware));
//抛出
export default store;

(2)reducer.js

初版

//引入插件
import { combineReducers } from "redux"
//保存
const reducer = combineReducers({})
//抛出
export default reducer;

最终版

//引入插件
import { combineReducers } from "redux"
//引入自己封装好的【后补充】=========================================
import myReducer from "../page/Login/model"
//保存，放入combineReducers【后补充】===============================
const reducer = combineReducers({ myReducer })
//抛出
export default reducer;

2.在page对应的页面，新建model.js文件

model.js

//1.修改类型
export const types = {}
    //2.修改方法
export const actions = {}
    //3.默认值
const initalState = {

}
const myReducer = (state = initalState, action) => {
    const { type, payload } = action;
    switch (type) {
        default: {
            return {
                ...state,
            }
        }
    }
}
export default myReducer;

3.在入口文件中设置index.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//redux
import store from "../src/store/index"
import {StoreContext}from "redux-react-hook"
import Router from "../src/router"
import "./mock/sy"
ReactDOM.render(
  <StoreContext.Provider value={store}>
 <Router />,
  </StoreContext.Provider>,

  document.getElementById('root')
);