React+Redux+AntD搭建TodoList应用

最近一直在学React&＃xff0c;它是一款前端的&＃xff0c;用于构建用户界面的Javascript库&＃xff0c;它的好处就是将界面拆分成一个个组件&＃xff0c;然后进行组合&＃xff0c;比较适合于模块化编程。但是组件之间的数据管理却没有一个好的解决方案&＃xff0c;特别是对于组件之间层次比较深&＃xff0c;数据之间传递还是很麻烦的&＃xff0c;所以有了Redux&＃xff0c;它主要职责就是多页面数据存储&＃xff0c;使用时候会构建一个中心store&＃xff0c;所有数据都是存放于state中&＃xff0c;而state存放于store中&＃xff0c;在界面中使用只需要从store中拿数据就可以了。由于学了一段时间React&＃xff0c;所以希望将学到的东西以Demo的形式进行展示&＃xff0c;方便后续复习使用。

TodoList

这个Demo是一款简易的TodoList&＃xff0c;功能比较简单&＃xff0c;但是常用的功能都有&＃xff0c;所以比较适合入门学习&＃xff0c;下面是它的演示

输入事项&＃xff0c;点击提交可以添加到列表的事项中&＃xff0c;点击delete删除对应的列表项&＃xff0c;就是这么简单

用到的库

• react 16.8.5
• redux 4.0.1
• react-redux 6.0.1
• antd 3.15.2
• redux-devtools-extension

用到的框架引入方式

npm install 框架名 --save // --save可以让下载下来的文件相关信息写入package.json中
或
yarn add 框架名


两种引入方式都可以&＃xff0c;如果网络不好需要配置taobao镜像&＃xff0c;或者翻墙&＃xff0c;我都是直接翻墙的

TodoList讲解

目录结构

入口index.js

为了以后拷贝方便&＃xff0c;我将导入语句的源码都拷贝过来了&＃xff08;包括后面的代码&＃xff09;

import React from &＃39;react&＃39;;
import ReactDOM from &＃39;react-dom&＃39;;
import TodoList from &＃39;./TodoList&＃39;;
import { Provider } from &＃39;react-redux&＃39;
import store from &＃39;./store&＃39;const App &＃61; (//获取store&＃xff0c;Provide组件作用是将store提供给子组件<Provider store&＃61;{store}><TodoList /></Provider>
)//整个项目的根组件&＃xff0c;挂载在root节点下&＃xff0c;通过ReactDOM.render进行渲染
ReactDOM.render(App, document.getElementById(&＃39;root&＃39;));


TodoList.js

import React from &＃39;react&＃39;;
import { Input, Button, List } from &＃39;antd&＃39;;
import { connect } from &＃39;react-redux&＃39;import {getInputChangeAction,handleClickAction,handleDeleteAction} from &＃39;./store/actionCreates&＃39;import &＃39;antd/dist/antd.css&＃39;/*** ui组件可以定义为无状态组件&＃xff0c;能够有效提供页面性能*/
const TodoList &＃61; (props) &＃61;> {const { inputValue, list, changeInputValue, handClick, handleDelete} &＃61; props;return (<div style&＃61;{{ marginTop: &＃39;10px&＃39;, marginLeft: &＃39;10px&＃39; }}><div><Input value&＃61;{inputValue} style&＃61;{{ width: &＃39;300px&＃39;, marginRight: &＃39;10px&＃39; }} onChange&＃61;{changeInputValue}/><Button type&＃61;"primary"onClick&＃61;{handClick}>提交</Button></div><Listborderedstyle&＃61;{{ marginTop: &＃39;10px&＃39;, width: &＃39;300px&＃39; }}itemLayout&＃61;"horizontal"dataSource&＃61;{list}renderItem&＃61;{(item, index) &＃61;> (<List.Item actions&＃61;{[<span onClick&＃61;{e &＃61;> {e.preventDefault();handleDelete(index)}} >delete</span>]}><div style&＃61;{{ width: &＃39;260px&＃39; }}>{item}</div></List.Item>)}/></div>);
}//1
const mapStateToProps &＃61; (state) &＃61;> {return {inputValue: state.todo.inputValue,list: state.todo.list}
}
//2
const mapDispatchToProps &＃61; (dispatch) &＃61;> {return {changeInputValue(e){const action &＃61; getInputChangeAction(e.target.value)dispatch(action)},handClick: function(e){const action &＃61; handleClickAction()dispatch(action);},handleDelete: function(e){const action &＃61; handleDeleteAction(e)dispatch(action)}}
}/*** connect组件连接之后就是容器组件*/
export default connect(mapStateToProps, mapDispatchToProps)(TodoList)


页面主要逻辑代码都在这块&＃xff0c;整个js文件主要由两部分组成&＃xff0c;其一为无状态组件TodoList&＃xff0c;定义为无状态组件可以提高一定的性能&＃xff0c;避免了有状态组件执行生命周期方法等耗时&＃xff0c;其二为与store进行连接的部分connect。组件搭建使用的是AntD&＃xff0c;这样可以减少页面的布局时间&＃xff0c;connect的作用是将TodoList与store进行连接&＃xff0c;这样TodoList就可以使用store中的数据了&＃xff0c;要想使用和对store中的数据进行更新还需要了解connect的两个参数mapStateToProps&＃xff0c;mapDispatchToProps&＃xff0c;这是两个方法返回值为对象。mapStateToProps作用是映射store中state给props&＃xff0c;这样就可以通过props应用state数据了&＃xff0c;但是还是需要自己去完成映射部分的代码。demo中代码为注释1。mapDispatchToProps作用是将Dispatch映射给props&＃xff0c;然后就可以使用Dispatch去更新store中的数据&＃xff0c;同样映射代码还需要自己去完成&＃xff0c;demo中代码为注释2&＃xff0c;一切都是套路&＃xff0c;具体照着代码模板修改就可以了。

接下来就来看下store中相关代码的实现&＃xff0c;也是套路。

store/index.js

import { createStore, compose } from &＃39;redux&＃39;;
import reducer from &＃39;./reducer&＃39;const composeEnhancers &＃61; window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;const store &＃61; createStore(reducer, composeEnhancers());export default store;


这部分是store的创建部分&＃xff0c;也是套路&＃xff0c;值得一提的是这里引入了redux-devtools-extension&＃xff0c;这是一个浏览器调试redux的工具&＃xff0c;大致界面如下

这工具还是很牛逼的&＃xff0c;它可以很方便看state中的数据&＃xff0c;同时还存有该页面中操作过的记录&＃xff0c;然后可以回放页面记录。具体可以安装之后探索使用。

store/reducer.js

import { combineReducers } from &＃39;redux&＃39;;
import { reducer as todoReducer } from &＃39;./todoReducer&＃39;;export default combineReducers({todo: todoReducer
})


这是所有reducer的总文件&＃xff0c;它存放所有子模块的reducer文件&＃xff0c;当一个项目模块很多的时候就需要将reducer进行分离&＃xff0c;然后通过combineReducers结合。我们可以看到它引用了todoReducer&＃xff0c;后面查看

store/actionCreates.js

import {CHANGE_INPUT_VALUE,ADD_ITEM,DELETE_ITEM
} from &＃39;./actionTypes&＃39;export const getInputChangeAction &＃61; (value) &＃61;> ({type: CHANGE_INPUT_VALUE,value
})export const handleClickAction &＃61; () &＃61;> ({type: ADD_ITEM
})export const handleDeleteAction &＃61; (value) &＃61;> ({type: DELETE_ITEM,value: value
})


action的管理&＃xff0c;需要使用的时候直接从这里引入。

store/actionTypes.js

export const CHANGE_INPUT_VALUE &＃61; &＃39;change_input_value&＃39;
export const ADD_ITEM &＃61; &＃39;add_item&＃39;
export const DELETE_ITEM &＃61; &＃39;delete_item&＃39;


action相关常量

store/todoReducer/index.js

import reducer from &＃39;./reducer&＃39;
export { reducer }


这个文件只是为了方便导入reducer&＃xff0c;在别的地方引用todoReducer中reducer文件时可以减少路径的书写。

store/todoReducer/reducer.js

import {CHANGE_INPUT_VALUE,ADD_ITEM,DELETE_ITEM
} from &＃39;../actionTypes&＃39;const defaultState &＃61; {inputValue: &＃39;&＃39;,list: []
}export default (state &＃61; defaultState, action) &＃61;> {if(action.type &＃61;&＃61;&＃61; CHANGE_INPUT_VALUE){const newState &＃61; JSON.parse(JSON.stringify(state));newState.inputValue &＃61; action.value;return newState;}else if(action.type &＃61;&＃61;&＃61; ADD_ITEM){const newState &＃61; JSON.parse(JSON.stringify(state));newState.list.push(newState.inputValue);newState.inputValue &＃61; &＃39;&＃39;return newState; }else if(action.type &＃61;&＃61;&＃61; DELETE_ITEM){const newState &＃61; JSON.parse(JSON.stringify(state));newState.list.splice(action.index, 1)return newState;}return state;}


todoList中reducer数据管理的地方&＃xff0c;注意在导出的时候这个函数是一个纯函数&＃xff0c;我们不能直接改变state中的值&＃xff0c;我们需要深拷贝state&＃xff0c;然后通过拷贝的state去操作数据&＃xff0c;最后将state返回。

这就是todoList所用相关代码&＃xff0c;方便以后学习拷贝使用。

下载地址

参考

1.React 16.4 开发简书项目
从零基础入门到实战

2.react官网