react与redux之间的关系

react与redux

react是一个视图层的框架，多个组件之间的传参十分麻烦，数据无法共享。大型项目中react常与大型的数据层框架相配合使用——redux。
readux：将所有的数据放于公共的存储器——store，所有的数据由数据存储器收发。
readux = reducer + flux.

redux的工作流程

redux安装： yarn add redux
1.store的创建
从redux中引入 createStore方法，调用方法并创建store

2.reducer的创建
返回一个方法，该方法接收state和action

3.将reducer传递给store，两者进行关联

4.在组件中使用数据
页面中引入store，并调用store提供的getState（）方法

5、将项目与redux devtools融合，便于调试redux
redux devtools配置：
安装完redux devtools之后，在创建的store的createStore()方法的第二个参数中传入
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
配置详情：https://github.com/zalmoxisus/redux-devtools-extension#usage

6、修改store中的数据
a.组件修改数据的方法中定义一个action，并传入store中的dispatch方法，store接收到action会自动将之前的数据和action派送给reducers, reducers根据action的type类型来将原来的数据深拷贝之后，再修改并返回新的state数据。
组件中：定义一个action，并派送

reducers:

7、reducers返回新的数据给store，在页面组件上，通过在store.subscribe()方法来订阅store中的数据变化。该方法中传入修改组件state的方法（this.setState(store.getState())）来更新当前组件的state。当store中的数据发生变化时，会自动调用store.subscribe方法，从而达到实时更新组件的state的目的。

感知到store中的数据发生变化后，在this.setState()中传入store.getState()，从store中重新取数据。

关键：
组件获取store中的数据：store.getState()，
组件修改数据定义一个action并派送dispatch()，
reducers根据action的type类型来进行不同的数据操作（原数据拷贝后再操作，immutable的思想），
数据修改后组件与store之间的关联通过store.subscribe()方法，方法中传入一个修改组件state的方法。this.setState(store.getState())
优化：
一：action type的拆分
提取所有action中的type类型，归放到一个actionTypes.js或者constants.js文件中，定义为常量，方便日后编码错误的定位。
constants.js。 组件中引入可使用import * as actionTypes from './constants'

二：用actionCreator统一创建action
统一管理页面上所有的action，方便代码测试维护。
组件中引入import * as actionCreator form './actionCreator'
actionCreator.js:

redux的三项基本原则

1. store是唯一的，项目下只能有一个store。（一处地方使用createStore()方法）
2. 只有store能够改变自己的内容，store拿到reducers返回的新数据，自己对自己的数据进行更新。
3. reducer必须是纯函数 （纯函数：给定固定的输入，就一定有固定的输出，而且不会有副作用，即不修改输入）