react获取全局_react 全局状态管理

全局状态管理

redux.jpg

多组件共享状态，一个组件发生改变其他的都要变

在电视上剧里活不过3集 甄嬛传

慈禧太后 -> 光绪帝 -> 卖地求荣 ->闭关锁国 -> 垂帘听政

安装redux

npm install redux

角色划分

皇帝 store 传递奏折 发布政令

老佛爷 reducer 接受奏折 根据局奏折批阅

老佛爷 是一个函数，能接受2个参数 参数1 修改前的数据 参数2就是奏折action

批奏折 就是根据奏折action 去修改数据

将数据 return给小皇帝

平民百姓 component 使用数据 修改数据

文武百官 actionCreator 提交奏折给小皇帝

多组件共享状态

1.创建小皇帝 store 并且和老佛爷关联

import {createStore} from 'redux'

2.创建老佛爷 并把老佛爷和小皇帝进行关联

import reducer from './reducer'

let store = createStore(reducer)

抛出小皇帝

export default store

3.在组件中使用

a.引入小皇帝

b.使用小皇帝下的getState方法，getState方法获取的值就是老佛爷返回的值

修改数据

一个组件发生改变,其他组件都要发生改变

平民(组件)告诉大臣自己需要什么操作,

引入大臣

import ActionCreator from './store/actionCreator'

告诉打成自己需要干嘛,可以给个参数,自己希望达到的目的

{

ActionCreator.changeAge(888)

}}>长大

创建一个大臣

接受平民的诉求创建奏折(也就是方法)

本质上一个对象,对象里有很多自定义方法供老佛爷批阅

方法中的type属性是必须的.

export default{

changeName(){

console.log('action里的方法')

// 创建奏折

let action={

type:'CHANGE_NAME', //type是必须的告诉老佛爷要修改那一条数据

payload:'隔壁老王'

}

// 发送奏折 将action 提交给老福爷

Store.dispatch(action)

},

changeAge(age){

let action={

type:'CHANGE_AGE',

payload:age

}

Store.dispatch(action)

}

}

引入小皇帝

小皇帝使用dispatch方法吧奏折传给老佛爷

Store.dispatch(action)

老佛爷接收到奏折

export default (prevState = State,actions)=>{

console.log('老佛爷批奏折',prevState,actions)

let newData = prevState

// 修改数据

let {type,payload} = actions

switch (type) {

//检查type类型.就是让老佛爷知道小皇帝转手的传过来的奏折的哪一个

case 'CHANGE_NAME':

//处理奏折,修改数据

newData.name = payload

break;

case 'CHANGE_AGE':

newData.age = payload

break;

default:

break;

}

// 返回修改后的数据

console.log('老佛爷返回的数据',newData)

return newData

}

在组件中引入小皇帝 ,小皇帝 创建监听数据改变并修改数据使用setState方法使页面也发生改变

componentDidMount(){

//并使用小皇帝中的subscribe方法监听数据的改变

Store.subscribe(()=>{

this.setState({})

})

}