Redux—redux-thunk——combineReducers

任何对数据的才做都会经理renducer，reducer要求是个纯函数（在函数内部不能修改函数的参数(输入)，要有返回值），它的功能是：传入旧的state，根据action对state做操作，返回新的state。

redux是什么

Redux是为javascript应用程序提供一个状态管理工具,集中的管理react中多个组件的状态。
redux是专门作状态管理的js库（不是react插件库可以用在其他js框架中例如vue，但是基本用在react中）

什么时候用redux

需求场景：

某个组件的状态需要共享的时候
某个组件的状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

redux三大原则

1、单一数据源:整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中
2、State 是只读的:唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
3、使用纯函数来执行修改:为了描述 action 如何改变 state tree ，你需要编写 reducers(一些纯函数，它接收先前的 state 和 action，)

redux常用概念

1、Store：管理着整个应用的状态，可以通过getState()来重新获得最新的状态(state)。
2、Action：是唯一可以改变状态(state)的方式，服务器的各种推送、用户自己做的一些操作，最终都会转换成一个个的Action，而且这些Action就是修改的动作，可以通过dispatch()方法来进行调用。
3、Reducer：Reducer 是一个纯函数，它接收 Action 和当前 State 作为参数，返回一个新的 State。（纯函数就是只要传入相同的参数，每次都应返回相同的结果）。

redux常用方法

1、createStore（）作用：创建一个Redux store来存放应用中所有的state，一个应用只能有个store。函数返回store对象。
2、getState()作用：获取数据
3、dispatch()分发action，这是改变state的唯一方法。
4、subscribe()添加一个变化监听器，每当改变store的时候就会执行

redux成员

成员	作用	类型
createStore(reducer,state)	创建store实例(state:仓库存放的数据；reducer：对数据的操作)	函数
combineReducers	合并多个reducer	函数
applyMiddleware	安装中间件，改装增强redux	函数

store成员

成员	作用	类型
subscribe(回调函数)	订阅state变化	函数
dispatch(action)	发送action 给 reducer	函数
getState()	获取一次state的值	函数
replaceReducer	一般在 Webpack Code-Splitting 按需加载的时候用	函数

使用（小试牛刀）

1、下载：

cnpm install --save redux

2、创建store实例

并引入state（数据），和reducer

3、创建state也就是数据

4、创建reducer

Action就是修改的动作，可以通过dispatch()方法来进行调用

5、在页面调用redux中的数据并盗用修改操作，对数据进行修改。

现在点击按钮就可以对redux数据进行修该了。
可以在reducer.js中打印action看看每次点击的你返回值是什么
附上截图

点击+1，action.type返回ADD执行了+1操作
点击-1，action.type返回DEL执行l-操作

我们在调用action（也就是修改操作），也可以返回数据给action

可以看一下控制台打印结果

可以看到点击+1，action得到了payload:5;点击-1，action得到了payload:2

那么我们就可以在reducer中使用页面返回的数据，对数据进行修改，如下图

如果state.js中有多条数据，看一下现在的写法

如果有多条数据，那我页面中，监听到数据变化后，多条数据都需要重更新。
在一个就是reducer中需要这样写

提取action进行封装

下面先将重新封的redux截图贴上
1、index.js

2、state.js

3、reducer.js

4、盗用redux的页面

接下来对action进行封装（是唯一可以改变状态)

也就是对下图标红的地方进行封装，封装的意义就是，如果不封装，那么人物是在各个组件里面的，不易查找，容易重复，封装在一起解决这些问题。

新建一个文件夹actionCreate.js,在其中对人物进行封装

封装完成之后再页面调用。

如果需要传递参数的话，一形参的方式传递给封装的人物，然后在，reducer.js中接收即可。

1、传递数据给action

2、在人物中接收

3、使用数据

action里处理异步—redux-thunk

需要安装中间件 redux-thunk ，redux-thunk可以增强dispatch的功能，让dispatch可以接收一个函数作为参数。

注：使用thunk后，actionCreate.js的action可以是个函数，如果return的是一个函数就会自动接收一个dispatch方法，axios请求结果获得后，再去走上面的reducer流程，代码如下：

applyMiddleware：

安装中间件，改装增强redux
1、安装：npm install redux-thunk --save
引入使用

使用thunk后，如果return的是一个函数就会自动接收一个dispatch方法，axios请求结果获得后，再去走上面的reducer流程，代码如下:

combineReducers（合并多个reducer）