react-redux与MobX状态库

参宿7

已于 2024-01-18 16:33:10 修改

阅读量71

点赞数

分类专栏：前端面试 react 文章标签：前端

于 2023-11-08 21:59:21 首次发布

本文链接：https://blog.csdn.net/qq_28838891/article/details/134297925

版权

前端面试同时被 2 个专栏收录

61 篇文章 5 订阅

订阅专栏

react

14 篇文章 0 订阅

订阅专栏

store：存储所有应用的状态（一颗状态树state tree），单一可靠数据来源

与组件通信区别

发：派发(dispatch)行为(action)给store

收：订阅store中的状态(state)来刷新自己的视图

state存储共享数据

action改变state

reducer根据action，返回新state

reducer(state,action){

const [state, dispatch] = [useSelector(state),useDispatch()]

const [state, dispatch] = useReducer(reducer, initialArg, init?)

步骤

1.主模块中进行注册 Provider组件

2.createStore(reducer)

3.useSelector((state)=> state.count)：读取/订阅更新

4.useDispatch()({type:'inc',payload:5})：修改

引入原因

集中管理状态：全局

React-Redux 提供了一个全局的状态存储容器（store），使得应用的状态可以在整个应用中进行集中管理。这有助于避免在组件之间传递大量的状态信息。

组件解耦：更关注UI

通过将状态逻辑从组件中抽离出来，可以使组件更加专注于 UI 的呈现，而不必担心状态的变化。这样可以提高组件的可复用性和可维护性。

单一数据源：易预测、调试

Redux 的设计理念是单一数据源，即整个应用的状态被存储在一个单一的 JavaScript 对象中。这使得状态的变化变得可预测且易于调试。

状态持久化：还原上次状态

核心

store：存储所有应用的状态（一颗状态树state tree），单一可靠数据来源

与组件通信区别

发：派发(dispatch)行为(action)给store

收：订阅store中的状态(state)来刷新自己的视图

state存储共享数据

action改变state

reducer根据action，返回新state

reducer(state,action){

根据action.type

return newState}

let { useReducer } = React;
let loginState = {//体现整体关联性与统一性**
    isLogin: true,
    isLogout: false
}
let loginReducer = (state, action) => {
    switch(action.type){
        case 'login':
            return { isLogin: true, isLogout: false }
        case 'logout':
            return { isLogin: false, isLogout: true }
        default: 
           throw Error('Unknown action: ' + action.type);
    }
}

const [state, dispatch] = [useSelector(state),useDispatch()]

const [state, dispatch] = useReducer(reducer, initialArg, init?)

let Welcome = (props) => {  
    const [ state, loginDispatch ] = useReducer(loginReducer, loginState);
    const handleLogin = () => {
        loginDispatch({ type: 'login' });
    }
    const handleLogout = () => {
        loginDispatch({ type: 'logout' });
    }
    return (
        <div>
            { state.isLogin ? <button onClick={handleLogout}>退出</button> : <button onClick={handleLogin}>登录</button> }
        </div>
    );
}

步骤

1.主模块中进行注册 Provider组件

import { Provider } from 'react-redux'
import store from './store'
...
 <Provider store={store}>
    <App />
  </Provider>
...

2.createStore(reducer)

import { createStore } from 'redux'
function counterReducer(state={count: 0}, action) {//reducer修改state
    switch(action.type){
        case 'inc':
            return {count: state.count+state.payload}
        default:
            return state;
    }
}
const store = createStore(counterReducer)
export default store

3.useSelector((state)=> state.count)：读取/订阅更新

4.useDispatch()({type:'inc',payload:5})：修改

//其他组件，例如<Bar>组件中使用store
...
import { useSelector,useDispatch } from 'react-redux'

export default function Bar() {

  const count = useSelector((state)=> state.count)//获取共享状态
  const dispatch=useDispatch();//修改共享状态

  const handleClick = () => {
    dispatch({           //dispatch触发Reducer，分发action
      type: 'inc',
      payload: 5
    })
  }

  return (
    <div>
     <button onClick={handleClick}>修改count</button>     
     Bar, { count }
    </div>
  )
}