Redux工作流程，React-Redux，以及简易TodoList

---

前言

以前初学redux数据流框架，很懵懂，觉得很繁琐。再次对知识点进行回顾的时候，对整体的数据流传输有了一个新的认识。

---

以下是本篇文章正文内容喽~

一、redux！！！

1.redux的工作流程

首先可以把React Components想象成是一个借书者，他想要去图书馆借一本《哈利波特》，Action Creators接收了这个行为，然后进行动作派发dispatch（action），派发给Store，Store是图书馆的管理员，负责整个图书馆的管理工作，是Redux的核心。Reducers会传入Store，与其进行数据绑定。Store会自动调用Reducers，并传入两个参数（previousState，action{ type, value }）分别为：当前的State和派发的Action。在Reducers中进行数据处理，但不直接改变State内容，而是通过深拷贝一份State，再进行修改，并返回一个newState。Store通过订阅（监听函数），得到当前的State，然后重新更新State。

---

2. redux实践流程

• 创建一个store文件夹，用于存放所有的redux文件。
• 创建一个index,js文件，用于创建唯一的store仓库，从redux模块中，引入createStore，用于创建store。const store = createStore( );
• 创建一个reducer，用于存储应用中的所有数据state。reducer是一个纯函数（传入固定参数，得到固定输出），并return state; 最后将export default reducer;

export default function reducer(state = defaultState, action) {
    return state;
}

• 将reducer注入创建好的store中， const store = createStore(reducer);，这样store才能共享整个仓库中的数据量，就可以去reducer中进行查看。
• 接着将store引入到组件中，通过store的getState方法获得仓库中state，在类组件的constructor构造函数中，将this.state = store.getState();这样组件就能通过this.state获得store里的所有数据了。
• 此时已经在页面上加载完成store里面的所有数据。若此时组件需要改变状态，就需要派发action。action对象中有两个参数，type和value。再通过dispatch(action)进行派发，就能够将action传递给store了，store会自动将action传递给reducer。
• reducer拿到之前的数据，与当前的数据进行对比。通过action.type的不同，执行不同的数据处理程序，虽然reducer可以接收state，但reducer中绝不能直接改变state。所以要先深拷贝一份state值。const newState = JSON.parse(JSON.stringify(state))；再对newState进行处理，处理之后返回一个newState给store。可见跟流程图一一对应。
• store接收到newState后，需要替换掉原始的数据。因为store里面的数据变化之后，组件中的数据也应该跟着更新。但是目前为止，组件中的数据并没有更新。所以我们需要在组建中通过store的subscribe方法进行订阅。store.subscribe(this.handleStoreChange);订阅这个行为最好放在componentDidMount()这个生命周期函数中，否则控制台会出现警告。具体原因是因为绑定的this.handleStoreChange方法中，我们需要通过this.setState(store.getState())更新state。如果直接将订阅放在constructor构造函数中，会在组件渲染render之前，进行订阅，然后更新state。会提示无法在尚未安装的组件上调用setState。
  

3.简易todolist基于redux数据流框架和antd Design UI库

GitHub下载地址：https://github.com/buliangc/TodoList_antd_redux.git
目录结构：

演示效果：

4.React-Redux

React-Redux与Redux的最大区别，我觉得是不需要进行subscribe订阅了，通过Privoder这个连接器连接store， 并通过connect进行数据连接和映射。同时可以将一些类组件精简为无状态组件。
<Provider store={ store }>的意思是我这个提供器连接了store，那么我这个provider里面所有的组件，都有能力获取到store里面的内容。组件已经将store提供给它内部所有的组件了。
核心API：

• Provider：连接store，它内部的所有组件都能够获得store里面的内容。

<Provider store={ store }>
    <TodoList>    //可获得store里面的内容
    </TodoList>
</Proovider>

在TodoList组件中，import { connect } from 'react-redux'; 用于获取数据，不像redux之前那么麻烦，需要通过this.state = store.getState( );

• connect：让TodoList组件与store里面的数据做连接。

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);  

mapStateToProps：将store里面的state映射到组件里面，作为当前组件的props属性。
mapDispatchToProps：就是将action和dispatch合并映射到组件里面，作为当前组件的props属性

总结

这是我最近对redux，react-redux的一些总结，日后有新的理解再进行补充。若有理解不到位的地方请大佬批评指正，谢谢~