# 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

# 使用ant.design

<Layout>
  <Sider>

  </Sider>
  <Layout>
    <Header>
    </Header>
    <Content>
    </Content>
  </Layout>
</Layout>
1
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
Last Updated: 8/9/2022, 4:24:39 PM