react中使用redux：
1.创建redux子模块：
import {createSlice} from '@reduxjs/toolkit
const module1 = createSlice({
initialState:{},//初始化数据
reducers:{}//修改数据的同步方法
})
2.组合redux子模块：
import {configureStore} from '@reduxjs/toolkit'
import modulle1 from './module1'
export default configureStore({
reducer:{
moduleabcd:module1//注册子模块
}
})
3.为React提供Redux store，使所有组件都能访问
import {Provider} from 'react-redux'
//render函数中用provider包裹根组件
<Provider store={store}><APP /></Provider>
4.组件中使用数据
import {useSelector} from 'react-redux'
const {token} = useSelector(state=>state.token)
5.组件中修改store数据(redux是严格单向数据流)
import { useSelector, useDispatch } from 'react-redux'
import {fn} from ./module1//导入前面子模块中导出的同步修改数据的函数
const dispatch = useDispatch()
const action = fn()
dispatch(action)或者dispatch(fn(xxx))
//传入的参数xxx会传到子模块的reducers下的fn函数的第二个形参action下的payload属性保存
6.异步处理
redux中如果异步处理数据也是要调用dispatch，最后在组件中再次用dispatch调用该异步函数
注意，dispatch需要加到useEffect的依赖项数组中，因为redux不像mobx可以自动追踪更新
react中使用mobx：
1.创建mobx子模块
import {makeAutoObservable} from 'mobx'
class Module1Store = {
state1:0
constructor(){
//响应式处理
makeAutoObeservable(this,{
computedXXX:computed//计算属性声明
})
}
//@action可以不加，建议加，利于优化与维护
@action
fn=()=>{
this.state1++
}
//get关键词定义的mobx的计算属性，get关键词保证this指向类实例
get computedXXX(){
return this.state1+365
}
}
const module1 = new Module1Store()
export default module1
2.组合模块
import React from 'react'
import module1 from './module1'
import module2 from './module2'
class RootStore {
constructor(){
this.module1Store = module1
this.module2Store = module2
}
}
const rootStore = new RootStore()
const context = React.createContext(rootStore)
const userStore = ()=>React.useContext(context)
export {useStore}
3.组件中使用mobx数据
import {observer} from 'mobx-react-lite'
import {useStore} from './store'
function App(){
const store = useStore()
return(
<div></div>
)
}
export default observer(App)//包裹组件让视图响应数据变化
4.组件中通过访问mobx函数修改数据(不像redux禁止直接赋值，但不建议)
5.mobx异步处理(可以直接定义在store类里，普通函数基础上加上async即可)
