学习react基础知识（五）

redux 全局状态管理

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 ->组件（监听更新）

   1. 组件的里的监听不用写了

   2. actionCreator 默认作两个事情1.建立action 2.经过dispath 发送action actionCreator 使用插件以后只要 建立action

   3. 在组件里发送

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. 若是是同步的方法也不须要动 返回actionb. 若是action里有异步 返回一个函数 函数能接受dispath 在函数内部 作网络请求 成功以后经过dispath手动的发送