About
大家好，我是且陶陶，今天跟大家分享一个redux的todoList案例，通过这个案例能够快速掌握redux的基本知识点🌹

❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…

前情回顾 - 什么是redux 🪷

最流行的状态管理工具之一。(类似于 vue中的vuex)

Redux和React是两个独立的工具/

三个核心概念🌟

1. action（动作/行为）：【对象格式】描述要做的事（例如：登陆、退出、增删改查等等…)
2. reducer（函数）：【函数格式 function reducer(state = 0，action){ } 】更新状态
3. store（仓库）：整合action(动作)和reduce(函数)
   

store分配要做的事action给reducer

🍬TodoMVC案例

代码地址🍻：
TodoMvc
欢迎大家批评指正～

功能介绍 🌺

🍦 添加事项
🍦 删除事项
🍦 完成or未完成事项
🍦 全选反选
🍦 清空

🍿 静态结构

🍰 状态管理 - redux

一、创建store📂

1. 在 store/reducer/todos.js 中处理行为

   const initList = [{ id: 1, name: '学习日语，备考N1', isDone: true },{ id: 2, name: '学习英语，备考雅思', isDone: false },{ id: 3, name: '学习GO，找工作', isDone: false },
   ]
   export default function todosReducer(state = initList, sction) {return state
   }
   

2. 在 store/reducers/index.js 中合并单独的reducer并导出

   // 模块合并 并导出
   import todos from './todo'
   import { combineReducers } from 'redux'const rootReducer = combineReducers({ todos })
   export default rootReducer

3. 在store/index.js中挂载 reducer和action

   // 创建仓库，挂载reducers 并导出
   import { createStore } from 'redux'
   import reducers from './reducers/index'
   // 创建store
   const store = createStore(reducers)
   export default store

二、引入redux🧊

在index.jsx中，引入redux和react-redux

用Provider包裹根组件，并提供store值

import ReactDOM from 'react-dom/client'
import App from './App'
import store from './store/index'
import { Provider } from 'react-redux'
import './styles/base.css'
import './styles/index.css'// 渲染UI界面
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(<Provider store={store}><App></App></Provider>
)

三、使用仓库状态📉

1. 在 components/TodoMain.jsx 【列表内容组件】中，使用 useSelector, useDispatch 这两个hook 操作状态。

   import React from 'react'
   import TodoItem from './TodoItem'
   import { useSelector, useDispatch } from 'react-redux'
   export default function TodoMain() {// 拿到状态const todos = useSelector((state) => state.todos)**console.log(todos)**// 修改状态const dispatch = useDispatch()......
   

更改状态🍥

步骤

1. 界面绑定onChange事件，dispatch触发行为。
2. 定义一个action行为，声明actionType
3. 根据行为在todosReducer中处理状态

功能实现🍹

界面渲染🕸️

渲染 事项📋

1. 在TodoMain.jsx中。循环渲染todolist中的每一项。传递每一项item

 ......return (<section className="main"><input id="toggle-all" className="toggle-all" type="checkbox" /><label htmlFor="toggle-all">Mark all as complete</label><ul className="todo-list">{/* todolist的每一项 */}**{todos.map((item) => {return <TodoItem key={item.id} todos={item}></TodoItem>})}**</ul></section>)

1. 在TodoItem.jsx子组件中接收每一项。并渲染

   1. 划线样式类名：completed
   2. 展示输入框类名：editing

   export default function TodoItem(**props**) {const todoitem = props.todosreturn (// completed - 划线，已完成事项// editing - 输入事项<li className={todoitem.done ? 'completed' : ''}><div className="view">{/* 复选框设置选中状态 */}<input className="toggle" type="checkbox" checked={todoitem.isDone} /><label>{todoitem.name}</label><button className="destroy"></button></div><input className="edit" /></li>)
   }

做到这里，我们会发现控制台报错：

意思是我们这里添加了checked属性，但是需要添加一个change事件。所以接下来需要添加change事件。

修改单项🐣

添加事件🐥

因为当前是受控组件，无法修改。所以需要给他一个onChange事件

onChange事件交给store去修改数据。

---

思路：

1. 绑定onChange事件，在这个事件中用dispatch触发action行为
2. 定义一个action行为
3. 声明actionTypes
4. 根据行为在todosReducer里面处理状态

---

代码：

1. 绑定onChange事件

   1. 传递id和当前状态

   <inputclassName="toggle"type="checkbox"checked={todoitem.isDone}onChange={() => {dispatch(changeDone(todoitem.id, !todoitem.isDone))}}
   />
   

2. 定义action行为

   import { CHANGE_STATE } from '../constants/todo'// 修改单个状态的行为
   export const changeDone = (id) => {return {type: CHANGE_STATE,id,}
   }

3. 声明actionType

   // 声明 constantTypes
   export const CHANGE_STATE = 'todos/changeDone' // 修改单个复选框状态类型

4. todosReducer里面处理状态

   case CHANGE_STATE:// 注意：状态不可变return state.map((item) => {if (item.id === action.id) {return {...item,isDone: action.isDone,}} else {return item}})
   

5. 使用dispatch触发action

   import React from 'react'
   import { useDispatch } from 'react-redux'
   ...
   export default function TodoItem(props) {...const dispatch = useDispatch()return (...<inputclassName="toggle"type="checkbox"checked={todoitem.isDone}onChange={() => {**dispatch**(changeDone(todoitem.id, !todoitem.isDone))}}/>...)
   }

删除单项🐤

思路：

1. 给X绑定点击事件 onClick
2. 定义一个action行为
3. 声明actionTypes
4. 根据行为在todosReducer里面处理状态

---

代码：

1. 给X绑定点击事件 onClick

   <button
   className="destroy"
   onClick={() => {dispatch(delTodo(todoitem.id))
   }}
   ></button>
   

2. 定义一个action行为

   // 删除单个代办项
   export const delTodo = (id) => {return {type: DELETE_TODO,id,}
   }

3. 声明actionTypes

   export const DELETE_TODO = 'todos/delTodo' // 删除单个待办
   

4. 根据行为在todosReducer里面处理状态

     case DELETE_TODO:return state.filter((item) => {// 过滤掉与选择的这一行相同的idreturn item.id !== action.id})
   

   添加单项🦜

   1. 绑定onChange事件，得到输入框的输入内容

      import React, { useState } from 'react'
      import { useDispatch } from 'react-redux'
      import { addTodo } from '../store/actions/todo'export default function TodoHeader() {**const [inputValue, setInputValue] = useState('')// 添加单项todoconst addValue = (e) => {setInputValue(e.target.value)}**return (<header className="header"><h1>todos</h1><inputclassName="new-todo"placeholder="今天做什么?"value={inputValue}autoFocus**onChange={addValue}**/></header>)
      }

   2. 绑定onKeyDown 事件，键盘按下时传递输入项value

        <inputclassName="new-todo"placeholder="今天做什么?"value={inputValue}autoFocusonChange={addValue}onKeyDown={(e) => {if (e.key === 'Enter') {console.log('回车', inputValue)dispatch(addTodo(inputValue))setInputValue('') // 清空输入框}}}/>
      

   3. 定义一个action行为

      // 添加单个待办项
      export const addTodo = (inputValue) => {return {type: ADD_TODO,name: inputValue,}
      }
      

   4. 声明actionTypes

      export const ADD_TODO = 'todos/addTodo' // 添加单个待办项
      

   5. 根据行为在todosReducer里面处理状态

      case ADD_TODO:if (!action.name.trim()) return// 状态不可变！！！return [{id: state.length + 1,name: action.name,isDone: false,},...state,]
      

底部筛选🐩

<aside>
💡 要实现底部筛选，可以在footer中使用过滤器进行分发。</aside>

一、列表项绑定筛选后数据

1. 声明actionTypes

   // 筛选栏标题
   export const SHOW_ALL = 'show_all'
   export const SHOW_COMPLETED = 'show_completed'
   export const SHOW_ACTIVE = 'show_active'
   // 筛选行为
   export const SET_VISIBILITY_FILTER = 'todos/setVisibilityFilter'
   

2. 定义筛选栏标签的静态数据

   import { SHOW_ALL,SHOW_ACTIVE,SHOW_COMPLETED } from "./todo";export  const FILTER_TITLES = {[SHOW_ALL]: 'All',[SHOW_ACTIVE]: 'Active',[SHOW_COMPLETED]: 'Completed'}
   

3. 定义一个action行为

   // 底部筛选栏 - 用于更新Redux store中的过滤状态
   export const setVisibilityFilter = (filter) => ({type: SET_VISIBILITY_FILTER,filter
   })
   

4. 根据行为在todosReducer里面处理状态

   1. 新建一个reducer/filter.js

   import { SET_VISIBILITY_FILTER } from '../constants/todo'
   import { SHOW_ALL } from '../constants/todo'
   // 设置已完成&未完成，并返回参数。
   const visibilityFilter = (state = SHOW_ALL, action) => {switch (action.type) {case SET_VISIBILITY_FILTER:return action.filterdefault:return state}
   }export default visibilityFilter
   

   2. 新建一个selector/isVisible.js

   // todo项是否可见 方法
   import { SHOW_ACTIVE, SHOW_ALL, SHOW_COMPLETED } from '../constants/todo'export function selectVisible(state = [], filter) {switch (filter) {case SHOW_ALL:return statecase SHOW_ACTIVE:return state.filter((todo) => !todo.isDone)case SHOW_COMPLETED:return state.filter((todo) => todo.isDone)default:return state}
   }
   

5. 在TodoMain.jsx中，使用筛选(未完成/已完成/全部)后的状态来循环渲染列表项

// 筛选出已完成or未完成or全部的项
// 传入两个参数-参数1：所有数据；参数2：过滤条件const visibleTodos = useSelector((state) =>selectVisible(state.todos, state.visibilityFilter))

二、底部筛选栏设置过滤条件

1. 在TodoFooter.jsx中，循环渲染过滤条件。
2. 给a链接绑定onClick事件，触发action行为。实现数据的过滤展示。

   <ul className="filters">{Object.keys(FILTER_TITLES).map((filterTitle) => (<li key={filterTitle}><ahref="./#"className={classNames({ selected: filterTitle === filter })}onClick={() => dispatch(setVisibilityFilter(filterTitle))}>{FILTER_TITLES[filterTitle]}</a></li>))}
   </ul>
   

删除全部已完成☘️

1. 给按钮绑定点击事件 onClick

   <buttonclassName="clear-completed"onClick={() => dispatch(changeAll(true))}
   >Clear completed
   </button>
   

2. 定义一个action行为

   // 清除所有已完成
   export const changeAll = (isDone) => {return {type: CHANGE_ALL,isDone,}
   }
   

3. 声明actionTypes

   export const CHANGE_ALL = 'todos/changeAll' // 清除所有已完成
   

4. 根据行为在todosReducer里面处理状态

   case CHANGE_ALL:return state.filter((item) => {return item.isDone !== action.isDone
   })
   

持久化存储 - 本地 🌈

1. 定义一个action行为

   // 本地localstore存储
   export const setLocalToken = (todos) => ({type: SET_LOCAL_TOKEN,todos,
   })
   

2. 声明actionTypes

   // 本地localstore存储
   export const SET_LOCAL_TOKEN = 'todos/setLocalToken'
   

3. 根据行为在reducer里面处理状态

   case SET_LOCAL_TOKEN:return action.todos
   

4. 在TodoMain.jsx中触发action

   const todos = useSelector((state) => state.todos)
   // 触发action，传入本地存储的状态useEffect(() => {const savedTodos = JSON.parse(localStorage.getItem('todos'))if (savedTodos) {dispatch(setLocalToken(savedTodos))}
   //[dispatch] 作为依赖数组。只有当 dispatch 更新时才重新执行 useEffect 中的逻辑}, [dispatch])
   // 状态存储到本地useEffect(() => {localStorage.setItem('todos', JSON.stringify(todos))}, [todos])