项目状态管理 redux 配置

npm i @reduxjs/toolkit react-redux

rtk模式配置 reducers

React\airbib\src\store\moudles\home.js

// rtk 方式
import { createSlice } from '@reduxjs/toolkit'

const homeSlice = createSlice({
	name:"home",
	initialState:{
		productList:[]
	},
	reducers:{
		
	}
})

export default homeSlice.reducer

传统方式配置 reducers

React\airbib\src\store\moudles\entire\reducer.js

const initialState ={
	currentPage:3
}
function reducer(state= initialState,action) {
	switch(action.type){
		default:
			return state
	}
}

export default reducer

React\airbib\src\store\moudles\entire\index.js

import reducer  from "./reducer";

export default reducer

React\airbib\src\store\index.js 将 两种方式的 reduces 导入到文件中

import {configureStore} from "@reduxjs/toolkit"
import homeReducer from "./moudles/home"
import entireReduce from "./moudles/entire"
const store = configureStore({
	reducer:{
            home:homeReducer,
            entire:entireReduce
	}
})

export default store

React\airbib\src\index.js

import React ,{Suspense} from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import {Provider} from "react-redux" // redux 状态管理配置

import App from '@/App';
import "normalize.css"
import "@/assets/css/index.less"
import store from './store'


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Suspense fallback="loading"> 
        <Provider store={store}>
            <HashRouter>  
                <App />
            </HashRouter>
        </Provider>
    </Suspense>
 
  </React.StrictMode>
);