react技术全家桶（45）redux使用

redux是一个专门用于做状态管理的js库 （不是react插件库）
作用：集中式管理react应用中多个组件共享的状态。

什么情况下使用redux?
某个组件的状态需要让其他组件可以随时拿到数据
一个组件需要改变另一个组件的状态 通信

redux的使用：
安装：
npm i redux

redux迷你版使用：
新建一个redux目录
新建一个count_reducer.js count是一个组件名称 这个文件就是对count组件的某些状态进行集中管理。
该文件使用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
reducer函数会接到两个参数，分别为：之前的状态(preState),动作对象(action)

export default function countReducer(preState=0,action){
const {type,data} = action;
switch(type){
case ‘increment’:
return preState+data;
case ‘decrement’:
return preState -data;
default:
retrun preState;
}
}
新建一个count_stroe.js 这个是redux的核心组件之一 必须要有 作用就是修改状态 需要接受一个参数 参数必有操作类型 操作数。
import {createStore} from ‘redux’;
import countReducer from ‘./count_reducer’
export default createStore(countReducer );

这两个文件该如何管理：
import store from ‘./redux/count_stroe’
获取管理的状态：
store.getState();//获取的就是初始状态的值 初始状态的值是在count_reducer.js中设置的 就是preState=0
store会自己调用count_reducer的方法 来修改管理的状态。

如何通知store修改管理的状态
store.dispatch({type:'increment',data:'操作数'});//需要action对象

react的setState方法 会修改状态数据 也会调用render方法 重新挂载组件
但是store的dispatch只会修改管理状态的数据 不会调用render方法 重新挂载组件

解决方案：
使用挂载组件的生命周期的函数：在组件挂载的时候监听 store的数据是否发生改变，如果改变了就调用render，
componentDidMount(){
store.subscribe(()=>{
//this.render();//我们自己调用的render没用
this.setState({})//意思是啥也不改 但是react会调用render方法。
});
}

redux完整版使用：

比精简版多几个文件：
在redux中添加count_action.js文件 改文件专门为count组件生成action对象。

export const createIncrementAction = data => ({type:‘increment’,data})
export const createDecrementAction = data => ({type:‘decrement’,data})

使用：
import {createIncrementAction,createDecrementAction} from ‘./redux/count_action’

store.dispatch(createIncrementAction(操作数));

异步action
action 的值可以是一般对象 也可以是函数
值为一般对象就是 就是同步action
值为函数 就是异步action

export const createDecrementASyncAction = (data,time) => {
return (dispatch) =>{
setTimeout(()=>{
dispatch(createIncrementAction(data))
},time)
}
}

store不支持action是函数 必须要有中间件。
安装插件
npm i redux-thunk
store.js文件修改：
import {appluMiddleware} from ‘redux’
import thunk from ‘redux-thunk’

export default createStore(countReducer,applyMiddleware(thunk));

这时store就支持action的值为函数