React 全局状态管理

最新推荐文章于 2025-10-21 08:00:35 发布

原创最新推荐文章于 2025-10-21 08:00:35 发布 · 712 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react #reactjs

本文介绍了React应用中全局状态管理的实现，包括store、reducer和actionCreator的角色。reducer负责根据actions更新数据，actionCreator创建actions，组件通过store获取和变更状态，但状态变化不会自动触发页面更新，需通过调用actionCreator的方法来实现。

React 全局状态管理

store

import {createStore} from 'redux'
import reducer from  './reducer'
// 将store和reducer 进行关联
let store = createStore(reducer)//创建全局状态管理对象
export default store //抛出store

reducer 是一个函数，能接受2个参数参数1 修改前的数据参数2就是actions
就是根据actions 去修改数据
将数据返回给store

let State={
  name:'王一',
  age:16
}
// prevState 代表修改前的数据 = 付一个初始值默认值
export default (prevState = State,actions)=>{
 let newData = prevState
 // 修改数据
 let {type,payload} = actions
 switch (type) {
   case 'CHANGE_NAME':
      newData.name = payload
     break;
   case 'CHANGE_AGE':
     newData.age = payload
     break;
   default:
     break;
 }
 //  返回修改后的数据
 return newData
}

actionCreator 本质是一个对象对象里有很多方法
在内部的函数
a. 创建action 也是一个对象必须有type
b. store.dispatch(action) 提交action给reducer

import Store from  './store'
export default{
  changeName(){
    console.log('action里的方法')
    // 创建action
    let action={
      type:'CHANGE_NAME', //type是必须的告诉reducer要修改那一条数据
      payload:'老王'
    }
    // 发送action 将action 提交给reducer
    Store.dispatch(action)
  },
  changeAge(age){
    let action={
      type:'CHANGE_AGE',
      payload:age
    }

    Store.dispatch(action)
  }
}

在组件中使用
a.引入store
b.使用store下的getState方法，getState方法获取的值就是reducer返回的值

let  {} = store.getState()

数据更改了但是页面不会发生改变
通过

   store.subscribe(()=>{
     this.setState({})  //更新界面
   })//监听全局状态值发改变

调用方法时需引入actionCreator

import ActionCreatore from "./store/actionCreator"

然后调用里面的方法