React---状态管理模式

redux

• Redux是一个全局应用状态的库
• Redux使用单向数据流
  • State描述了应用程序在某个时间点的状态，视图基于该state渲染
  • 视图dispatch一个action
  • store调用reducer，根据发生的事情来更新state
  • store将state发生的变化通知UI
  • 视图基于新state渲染 缺点：
• 代码比较臃肿
• redux存在的问题：意外的mutations

redux toolkit

使用redux toolkit与redux的好处：

• redux toolkit可以通过单一的函数调用store设置，保留store选项的能力
• 清除意外的mutations
• 清除了手写任何action creator或action type的需求

使用步骤：

• 安装 npm i react-redux @reduxjs/toolkit
• 创建src/store/modules/user.js文件

import {createSlice,configureStore} from '@reduxjs/toolkit'
const counterSlice = createSlice({
  name:'counter',
  initialStore:{
    value:0
  },
  reducers:{
    increment:state=>{
      state.value += 1
    },
    decrement:(state,action)=>{
      state.value += action.padload
    },
  }
})
export const {increment,decrement} = counterSlice.actions
// 异步方法
const fetchLogin = ()=>{
  return async(dispatch)=>{
    const res = await fetch(URL)
    dispatch(yyy(res.data))
  }
}
export {fetchLogin}
export default  counterSlice.reducer

• 创建src/store/index.js文件

import {configureStore} from '@reduxjs/toolkit'
import counterReducer from './modules/user'
export default configureStore({
  reducer:{
    counter:counterReducer
  }
})

• 根组件的index.js文件

import {Provider} from 'react-redux'
import store from './store'
root.render(
 <Provider store={store}></Provider>
)

• react组件中使用redux状态和操作

import {increment,decrement}from 'modules/user.js'
import {useSelector,useDispatch}from 'react-redux'
function App(){
  const counter = useSelector(state=>state.counter.value)
  const dispatch = useDispatch()
  return(
    <div>
    <button onClick={()=>dispatch(increment())}></button>
    {counter}
    <button onClick={()=>dispatch(decrement())}></button>
    </div>
  )
}

总结

• 使用configureStore创建Redux store
  • configureStore接受reducer函数作为命名参数
• 为react应用程序组件提供redux store
  • 使用React-redux组件包裹
  • 传递Redux store 如
• 使用createSlice创建Redux slice reducer
  • 使用字符串名称、初始状态和命名的reducer函数调用"createSlice"
  • Reducer函数可以使用Immer改变状态
  • 导出生成的slice reducer 和action creators
• 在React组件中使用React-Redux中的useSelector、useDispatch钩子函数
  • 使用useSelector钩子从store中读取数据
  • 使用useDispatch钩子获取dispatch函数，并根据需要 dispatch actions

mobx

zustand