# Todoist+redux
# 需求
新增todo 加入正在进行中列表,同时持久化
完成todo 将todo从进行中列表移动到已完成列表
恢复todo 将已经完成、已经删除的todo移动到正在进行中列表
删除todo 删除todo,从已完成、进行中列表移动到已经删除列表
持久化todo localStorage
筛选:已完成、进行中、已删除 切换filter 切换列表数据
修改
# 创建项目
create-react-app todoist_redux 使用create-react-app脚手架创建项目
npm install react-redux redux 安装redux 和 react-redux
npm install react-router-dom 安装react-rrouter-dom
安装ant.design npm install antd
npm start
# 工程结构
# 集成redux
import {Provider} from "react-redux" 引入Provider组件, 包裹项目的根组件
创建store
import {createStore, combineReducers} from "redux"
const rootReducer = combineReducers({
});
const initialState = {
};
const store = createStore(rootReducer,initialState);
export default store;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 使用ant.design
<Layout>
<Sider>
</Sider>
<Layout>
<Header>
</Header>
<Content>
</Content>
</Layout>
</Layout>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 添加
- 定义action创建函数
- 修改reducer
- 合并reducer
- 改造组件
添加业务:
- 判断pendding数组是否存在重复内容的todo
var temp = state.pendding.find((value)=>{
return value.content === item.content
})
if(temp){
//更改组件的提示状态
}else {
//添加
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8