react状态管理

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'

import {BrowserRouter} from 'react-router-dom'

// 状态管理
import {Provider} from 'react-redux'
import store from './store'

ReactDOM.createRoot(document.getElementById('root')!).render(
  // 状态管理要求最外层有Provider组件，必传属性store
  <Provider store={store}>
    <React.StrictMode>
      <BrowserRouter>
        <App/>
      </BrowserRouter>
    </React.StrictMode>
  </Provider>
)

store文件夹

index.ts

import {
  legacy_createStore,
  combineReducers, // 组合reducers
  compose,
  applyMiddleware
} from 'redux'
import reduxThunk from 'redux-thunk' // npm i redux-thunk

import NumStatusReducer from './Numstatus/reducer' // Numstatus模块reducer
import ArrStatusReducer from './ArrStatus/reducer' // ArrStatus模块reducer

// 组合各个模块的reducer
const reducers=combineReducers({
  NumStatusReducer,
  ArrStatusReducer
})
// 判断有没有__REDUX_DEVTOOLS_EXTENSION_COMPOSE__这个模块
let composeEnhancers=window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):compose
// 把仓库数据、浏览器redux-dev-tools、reduxThunk插件关联在store中
const store=legacy_createStore(reducers,composeEnhancers(applyMiddleware(reduxThunk)))

export default store

NumStatus文件夹

index.ts

const store={
  state:{
    num:20
  },
  // 只放同步的方法
  actions:{
    add1(
      newSate:{num:number},
      action:{type:string}
    ){
      newState.num++
    },
    add2(
      newState:{num:number},
      action:{
        type:string;
        val:number
      }
    ){
      newState.num+=action.val
    }
  },
  // 只放异步的方法
  asyncActions:{
    asyncAdd1(dispatch:Function){
      setTimeout(()=>{
        dispatch({type:'add1'})
      },1000)
    }
  },
  // 名字统一管理
  actionNames:{},
}

let actionNames={}
for(let key in store.actions){
  actionNames[key]=key
}
store.actionNames=actionNames

export default store

reducer.ts

import handleNum from './index'
let reducer={
  state={...handleNum.state},
  action:{type:string;val:number}
}=>{
  let newState=JSON.parse(JSON.stringify(state))
  for(let key in handleNum.actinoNames){
    if(action.type===handleNum.actionNames[key]){
      handleNum.actions[handleNum.actionNames[key]](newState,action)
    }
  }
  return newState
}
export default reducer

ArrStatus文件夹

index.ts

同上，state、actions部分如下

state:{
  arr:[10,20,30]
},
actions:{
  arrPush(
    newState:{arr:number[],
    action:{type:string;val:number}
    }){
      newState.arr.push(action.val)
    }
}

reducer.ts

同上

使用

import {useSelector,useDispatch} from 'react-redux'
const View=()=>{
  // 通过useSelector获取仓库数据
  const {num,arr}=useSelector((state:RootState)=>{
    num:state.NumStatusReducer.num,
    arr:state.ArrStatusReducer.arr
  })
  // 修改仓库数据
  const dispatch=useDispatch()
  const changeNum=()=>{
    // 调用同步方法
    diapatch({type:'add2',val,100})
  }
  const changeNum2=()=>{
    // 调用异步写法
    dispatch(numStatus.asyncActions.asyncAdd1)
  }

  return(
    <>
      <button onClick={changeNum}>同步按钮</button>
      <button onClick={changeNum2}>异步按钮</button>
    </>
  )
}
export default View