<meta charset="utf-8">
Vue全局状态管理 vuex
state mutation action getter module 辅助函数
redux
多组件共享状态，一个组件发生改变其他的都要变
在电视上剧里活不过3集 甄嬛传 慈禧太后 -> 光绪帝 -> 卖地求荣 ->闭关锁国 -> 垂帘听政
安装redux
npm install redux
角色划分
皇帝 store 传递奏折 发布政令 老佛爷 reducer 接受奏折 根据局奏折批阅 平民百姓 component 使用数据 修改数据 文武百官 actionCreator 提交奏折给老佛爷
多组件共享状态
1.创建小皇帝 store 并且和老佛爷关联 2.创建老佛爷
3.在组件中使用 a.引入小皇帝 b.使用小皇帝下的getState方法，getState方法获取的值就是老佛爷返回的值
一个组价组件改变其他组件都要变
创建actioncreatore 本质是一个对象 对象里有一堆的函数 在内部的函数 a. 创建action 也是一个对象必须有type b. store.dispatch(action) 提交action给老佛爷
老佛爷根据参数里修改前的数据和action 对数据进行修改 并且返回修改后的数据
数据更改了但是页面不会发生改变 通过 store.subscribe(()=>{ this.setState({}) 更新界面 })监听全局状态值发改变
redux 异步处理
同vuex中一样 可以将网络请求放到actionCreatore
减少重复的代码 统一管理api接口
时间旅行 更精准的检测到全局状态值的变化
样式作用域的问题
在react中样式没有作用域 ，当不同组件类名重复又的时候 导致样式覆盖
<meta charset="utf-8">
react-redux
优化模块 优化redux的使用过程
npm install redux react-redux
1 通过react-redux 提供的provider提供器 将全局状态对象挂载到根元素的上下文上
import Provider from 'react-redux'
import store from './store/store.js'
...
<Provider store = {store}>
<App></App>
</Provider>
...
2 在组件中使用全局状态值 通过react-redux 提供的connect 从跟组件的上下文上获取store对象， 通过高阶组件将获得到的store传给目标组件的props
import {connect} from 'react-redux'
class Son1 ... {}
connect(state=>state)(Son1)
3 组件中修改全局状态值 不需要写组件监听 组件 -> actionCreator -> redcuer ->组件（监听更新）
a 组件的里的监听不用写了
b actionCreator 默认做两个事情1.创建action 2.通过dispath 发送action actionCreator 使用插件之后只要 创建action
c 在组件里发送
react-redux 中异步action
解决方式通过异步中间件 redux-thunk redux-sage redux-promise ....
1 安装异步插件 npm install redux-thunk
2 在store.js 引入并使用
import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk' //解决异步的插件
import reducer from './reducer'
export default createStore(reducer,applyMiddleware(thunk))
3 除了actionCreatore 需要修改之外 其他的都不用动 a. 如果是同步的方法也不需要动 返回action b. 如果action里有异步 返回一个函数 函数能接受dispath 在函数内部 做网络请求 成功之后通过dispath手动的发送
{
addlist(){
let action ={}
return action
},
dellist(){
return(dispatch)=>{
<!-- 网络请求 -->
setTimeOut(()=>{
let action ={}
dispatch(action)
}，1000)
}
}
}
