在开始学习Redux基础之前先给大家推荐一个vsCode插件Simple React Snippets，它可以快速生成React代码结构，效果如图：
常用代码片段请参考官方介绍：
https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets
接下来实操一个简单实例逐步了解Redux， 开始吧！
初始化项目及搭建UI
1. 安装官方脚手架
npm install -g create-react-app
创建项目
create-react-app demo
启动项目
npm start
参考：
https://ant.design/docs/react/use-with-create-react-app-cn
2. 只保留index.js, 删除其余文件，新建TodoList.js文件，先输入imrc,再输入ccc文件结构
3. 安装antDesign
npm install antd –save
在TodoList.js文件引入样式文件
Import ‘antd/dist/antd.css’ ，
引入组件
Import {Button, Input, List} from ‘antd’
快速搭建UI界面
创建Redux中的仓库store和reducer
2. store文件夹下新建reducer.js，
const defaultState={}给个默认数据，导出一个方法函数，
把reducer引入到index.js, 在创建store的时候以参数的形式传给store
3. 在TodoList.js 文件中引入store， 删除之前的data数据，
store.getState()直接复制给组件的state, 然后通过this.state调用
Redux实现数据交互
改变Redux里面State的值， 就要创建Action这个对象，它有两个属性，第一个是对Action的描述， 第二个是要改变的值， 创建好Action， 要通过dispatch()传递给Store这个仓库，因为它并没有管理能力， 所以会自动推送Action 给reducer，reducer就拿到了原来的数据state和传递过来的新数据action，但是reducer并不能改变state， 就要通过return一个新声明的的变量newState
1. 增加input响应事件
添加响应事件
创建Action
Reducer接收数据
更新组件
2. 增加button的添加响应事件
添加响应事件
创建Action
Reducer接收数据
更新组件
store.subscribe(this.storeChange)订阅Redux的状态
到这里TodoList还差一个删除功能， 和添加类似，就留给阅读文章的小伙伴练手吧，做完这个demo，Redux就入门了。
当然这个demo还有很多需要完善的地方， 比如，写了很多Action， 产生了很多Action type, 是不是可以把这些Action统一放到一个文件进行管理呢？等等， 后面会继续跟大家分享…
总结
通过练习这个demo体验了Redux编写代码的整体流程， 最后贴一张Redux的官方图， 现在就更好理解了。
本篇文章来源于微信公众号: TripDesign
