又是很久不写博客了,最近在用蚂蚁金服的ant-design-pro写毕设,写着写着写不下去了,很多东西都不理解,不得不说大神写出来的东西都是需要花学习成本的,或者底子好,对于React新手来说就有点难了。所以就老老实实的认真看了下Redux到底如何使用,在这里推荐一下自己最近在看的书,写的算是比较详细的:《深入React技术栈》。废话不多说,今天就分享下自己如何使用redux来实现一个todoList的,希望对想要用redux的你会有所帮助。
(为什么叫升级版呢?因为之前写过一个没有用redux的todoList)
该项目使用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中应存储什么数据?
const initialState = { taskListData: { //任务列表 loading: false, error: false, taskList: [], }, userData: { //用户信息 loading: false, error: false, user: {}, }, noticeListData: { //通知列表 loading: false, error: false, noticeList: [], }, taskData: { //任务详情,在详情页使用 loading: false, error: false, task: {}, } };
2. reducer的分布:
每个state对应一个reducer,所以一共需要四个reducer,在src/redux/reducers中将所有的reducer合并,并且注意每个reducer的名字要和state同名:
/*redux/reducers.js*/ import { combineReducers } from 'redux'; import userReducer from '../component/User/indexRedux'; import noticeReducer from '../component/Notice/indexRedux'; import todoListReducer from '../views/TodoList/indexRedux'; import taskReducer from '../views/Detail/indexRedux'; export default combineReducers({ userData: userReducer, noticeListData: noticeReducer, taskListData: todoListReducer, taskData: taskReducer, });
每个state都对应一个reducer,所以和state一样,reducer应在放在最顶级的父级组件的目录中,所以将taskListData的reducer放在src/views/TodoList中,其他同理,代码如下: