# react-redux-todoListDemo

**Repository Path**: nanmooo/react-redux-todo-list-demo

## Basic Information

- **Project Name**: react-redux-todoListDemo
- **Description**: 初学react和redux所写的一个todoListDemo
- **Primary Language**: Unknown
- **License**: Unlicense
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-13
- **Last Updated**: 2022-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 安装依赖： yarn 
>
> 启动:：yarn start



## 项目界面

![在这里插入图片描述](https://img-blog.csdnimg.cn/8a2787ef18044ad4bf94f156aedc3307.png)

## TODOLIST基本流程

<font style="font-size:25px;color:#c12c1f;background:#53dfca">常爱蕊组</font>

constants声明常量 -> action配置对象 -> reducer里更新action定义的state数据 -> UI组件中触发

声明常量（constans）后，在Action你创建要改变的对象类型，接着在reduce里操作state和action并返回新的state，接着在UI界面组件编写dispatch触发逻辑事件。

```jsx
//常量
export const TODO_ADD = "TODO_ADD";

//action对象
export const todoAdd = (name) => ({
  type: TODO_ADD,
  id: Date.now(),
  name,
  done: false,
});

//reducer
case TODO_ADD:
      const { type, ...rest } = action;
      return [rest, ...state];

//UI组件
  const [name, setName] = useState("");
  const dispatch = useDispatch();

  const handleAdd = (e) => {
    setName(e.target.value);
  };
  const handleChange = (e) => {
    if (name.trim() === "") {
      return false;
    }
    if (e.key === "Enter") {
      dispatch(todoAdd(name));
      setName("");
    }
  };
  
<input
  value={name}
  onChange={handleAdd}
  onKeyUp={handleChange}
/>
```



## 功能分析

#### 添加label项：id唯一，获取内容，添加到数组

需要个时间对象作为key，在更新数据时，不需要对type进行更新，所以解构时采用后三种类型`{ type, ...rest } = action` 在赋值`[rest, ...state]`。

标签内通过value拿到输入框内容`value={name}` ,change事件监听改变  ` onChange={handleAdd}` ，拿到输入内容后通过`dispatch(todoAdd(name));` 传递过reduce进行数据更新。

监听keyUP，对输入内容做去除空格trim(）去除空格，非空不允许输入，Enter添加。



#### 删除label项：对数据源进行filter的id过滤即可

![在这里插入图片描述](https://img-blog.csdnimg.cn/8b18f1ee3c054ac8bbfc80537a2d72e3.png)

```js
state.filter((item) => item.id !== action.id);
```



#### 编辑label项

![在这里插入图片描述](https://img-blog.csdnimg.cn/3ec46091ae384964874a9ecc8d496b53.png)

- 使用`handleDblClick(item.id)`找到要修改的label项，用`useState` 保存个待修改label项的状态变量，选中时，给classname添加该样式名`样式名: 变量 === item.id`

- 获取焦点`s1Ref.current.focus()` , 失去焦点`handleBlue`事件

- 修改时通过获取`value/onChange/ref`输入内容

- 最后`onKeyUp`对`e.key` 是 enter保存还是 esc 退出做判断

  

#### 状态全选或反选

对数组所有item进行状态遍历，全部为真才是真，全选后做取反操作即可

```js
const nowDone = arryList.every((item) => item.done);
dispatch(todoCheck(!nowDone));
```



#### 切换状态栏

底部组件将选到的状态栏传递给主组件 `dispatch(filterCheck(active));` ，主组件对原始数据进行不同选项的过滤，匹配根据传来的`active` 选项名响应不同数据

```js
if (state.filter.active === "FINISH") {
   return state.todo.filter((item) => item.done);
}
```



#### 显示剩下代办数量和无任务完成时清除已完成任务按钮不显示

剩下数量只需计算状态为FALSE的label项目数量即可

```js
const noFinishLength = list.filter((item) => !item.done).length;
```

状态按钮不显示：利用数组的 `some` 方法,有真为真，绑定按钮的显示。

```jsx
{isShow && ( <button></button> )}
```



#### 数据持久化

根据`redux-persist` 配置即可