又是很久不写博客了，最近在用蚂蚁金服的ant-design-pro写毕设，写着写着写不下去了，很多东西都不理解，不得不说大神写出来的东西都是需要花学习成本的，或者底子好，对于React新手来说就有点难了。所以就老老实实的认真看了下Redux到底如何使用，在这里推荐一下自己最近在看的书，写的算是比较详细的：《深入React技术栈》。废话不多说，今天就分享下自己如何使用redux来实现一个todoList的，希望对想要用redux的你会有所帮助。
该项目使用react官方的create-react-app架构，每个目录可以根据自己的需求来划分。下面解释下每个目录的内容和功能。
public:主要放静态资源（入口html文件，图片资源，JSON文件等）；
src/component:不同的组件；
src/layouts:整个页面的基本架构，主要就是Nav，Footer，Content。Nav里面显示User和Notice的数据，Content中实现页面路由的切换，Footer固定不变；
src/redux:
--src/redux/configureStore:生成整个应用的store；
--src/redux/reducers:所有reducer的集合；
src/routes:页面的整体路由；
src/utils:自己封装的工具；
views:存放项目中所要展示的所有页面；
index:整个项目的入口文件；
二. 具体实现
1. 整个应用中store中应存储什么数据？
2. reducer的分布：
每个state对应一个reducer，所以一共需要四个reducer，在src/redux/reducers中将所有的reducer合并,并且注意每个reducer的名字要和state同名：
userData: userReducer,noticeListData: noticeReducer,taskListData: todoListReducer,taskData: taskReducer,});
每个state都对应一个reducer，所以和state一样，reducer应在放在最顶级的父级组件的目录中，所以将taskListData的reducer放在src/views/TodoList中，其他同理，代码如下：
3. action creator的分布：
每个动作都代表一个action，action由组件发出，所以将action creator单独一个文件，放在组件目录中。例如：ListItem组件的action creator:
三. 如何将redux和组件连接
react-redux提供了connect方法，将state和action creator绑在组件上，然后在组价内部以props的方式获取。下面是TodoList页面的具体实现：
return (
<List {...this.props} />
);
}
}
export default connect( state => {
return {
loading: state.taskListData.loading,error: state.taskListData.error,taskList: state.taskListData.taskList,};
},dispatch => {
return {
loadTaskList: bindActionCreators(loadTaskList,dispatch),updateTask: bindActionCreators(updateTask,deleteTask: bindActionCreators(deleteTask,addTask: bindActionCreators(addTask,};
})(TodoList);
connect方法有四个参数，这里主要说下前两个参数：
（1）mapStateToProps：参数为state，返回页面所需要的所有state；
（2）mapDispatchToProps：参数为dispatch，返回页面所要使用的异步回调函数。
眼明手快的你肯定看到了，我们从redux包中导出了bindActionCreators方法，该方法将dispatch和action creator绑定，用来触发action。
四. 异步的action creator如何触发呢？
因为每个action creator都是异步函数，我们传给组件的只是函数的声明，所以就要引入我们的中间件，只用在生成store时加入就行了：
在上面的代码中thunk就是一个中间件，我们将引入的中间件传入applyMiddleware就可以了。
五. store在哪里传入组件呢？
我们肯定会想到，store在整个应用中都存在，所以应该在整个应用的最顶层，对于一般项目而言，当然就是最顶端的路由了：
Provider是react-redux的一个组件，作用就是用来将store传入整个应用。
基本要讲的就是这些内容，完整的项目请看 github 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/34666.html