笔记：React 状态管理

Redux

React-Redux

Redux-Toolkit

Redux-Thunk

Redux-Saga

MobX v6

Dva

Redux
React-Redux
npm install -g redux react-redux
Action
同步Action

• 同步Action返回一个对象。
• actionType一般用一个常量文件保存，便于管理。
  export const ACTIONTYPE = ‘actionType’
  export const action = args => ({ type: ACTIONTYPE, args })
  异步Action
• redux-thunk用于创建异步Action，返回一个函数。
• 异步Action中会调用同步Action，并且会传入dispatch()方法。
  export const asyncAction = args => () => {
  setTimeout(dispatch => {
  dispatch(action(args))
  }, 1000)
  }
  Reducer
  // 初始化仓库数据
  const initState = {}
  export default function reducer (preState=initState, action) {
  const { type, args } = action
  switch (type) {
  case ACTIONTYPE:
  // 不要使用数组的push、unshift方法
  return newData
  default:
  return preState
  }
  }
  Store
• 创建包含异步Action的store。
  import { createStore, applyMiddleware, combineReducers } from ‘redux’
  import thunk from ‘redux-thunk’
  import reducer1 from ‘./’
  import reducer2 from ‘./’
  const allReducer = combineReducers({
  store1: reducer1,
  store2: reducer2,
  })
  export default createStore(allReducer, {}, applyMiddleware(thunk))
• 提供下所有需要state的组件。
  import { Provider } from ‘react-redux’
  import store from ‘./’

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(
<React.StrictMode>



</React.StrictMode>
);
React UI组件获取状态数据

• React UI组件需要包裹一层容器组件，容器组件与Redux进行数据通信，容器组件再将数据状态传给React UI组件通过props 获得数据。
• connect()监听state数据变化并渲染组件
  import { connect } from ‘react-redux’
  import action from ‘./’
  // 容器组件给UI组件传state
  const mapStateToProps = state => ({ key: state.store2.value })
  }
  // 容器组件给UI组件传action
  const mapDispatchToProps = dispatch => ({
  fun: args => dispatch(action(args))
  })
  // 返回一个容器组件
  export default const connect(mapStateToProps, mapDispatchToProps)(A)
  Hooks
  Redux-Toolkit
  npm install -g @reduxjs/toolkit
  Redux-Saga
• Redux-Saga是一个Redux的中间件，基于Generator实现
  npm install -g redux-saga
  Saga关联Redux仓库
  import { createStore, applyMiddleware } from ‘redux’
  import reducer from ‘./’
  import saga from ‘./’
  import createSagaMiddleware from ‘redux-saga’
  const sagaMiddleware = createSagaMiddleware()
  export default createStore(reducer, {}, applyMiddleware(sagaMiddleware))
  sagaMiddleware.run(saga)
  自定义Saga监听Action
  import { takeEvery, takeLatest, throttle } from ‘reudx-saga/effects’

export function * saga() {
yield takeEvery(‘actionType’， function * () {})
yield takeLatest(‘actionType’， function * () {})
yield throttle(100, ‘actionType’， function * () {})
}
MobX v6
npm install -g mobx mobx-react-lite
创建模块化仓库
import { makeObservable } from ‘mobx’

export default class aStore {
constructor() {
makeObservable(this)
}
// state
state = ‘数据’
// action
action = () => {}
// computed
get computed () {}
}
创建总仓库
import aStore from ‘./’
import bStore from ‘./’
import React from ‘react’

class RootStore {
constructor () {
this.aStore = new aStore()
this.bStore = new bStore()
}
}
const rootStore = new RootStore()
const context = React.createContext(rootStore)
const useStore = () => React.useContext(context)
export { useStore }
组件从仓库中获取数据
import { useStore } from ‘./’
import { observer } from ‘mobx-react-lite’

function A () {
const { aStore } = useStore()
return (
<div onClick={ aStore.action }>
{ aStore.state } + { aStore.computed }

)
}
export default observer(A)
autoRun
reaction
runInAction