您的位置：首页 > 房产 > 建筑 > 【案例】使用React+redux实现一个Todomvc

【案例】使用React+redux实现一个Todomvc

2024/10/7 0:18:05 来源：https://blog.csdn.net/qq_41675812/article/details/140622328  浏览:  次   关键词：【案例】使用React+redux实现一个Todomvc

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
    1. 新建一个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])

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

最新新闻

热搜词

强化学习部分代码的注释分析 【Rust练习】17.泛型 每日OJ题_牛客_最长无重复子数组_滑动窗口_C++_Java 2024-10-6 模拟赛总结 Gridview配置数据源--信任服务器证书 如何写出一份能够吸引面试官的简历

声明：本站所有新闻及新闻图片来源于其他网站，如有侵权，请及时联系我们！

客户服务 | 关于我们 | 版权声明

版权所有：

Copyright 2024 尧图网 All Rights Reserved.QQ:809451989