在前端开发中,React 和 Redux 是目前最流行的技术框架之一。如果你想提高自己的前端开发技能,同时学习如何使用这两种强大的技术,那么本文将会是一个很好的起点。我们将会详细介绍如何使用 React 和 Redux 实现一个 TodoList 应用,并且提供示例代码和深入学习的指导意义。
TodoList 应用功能介绍
TodoList 应用是一个在日常生活和工作中非常有用的工具。它可以帮助你记录待完成的任务,并且让你更加高效地完成它们。在这个项目中,我们将会实现以下功能:
- 添加一个待完成的任务;
- 删除一个已经完成的任务;
- 标记一个任务为已经完成;
- 查看当前所有待完成和已完成的任务。
实现 TodoList 应用
在实现 TodoList 应用之前,我们需要先安装必要的依赖,包括 React、Redux、React-Redux 和 Redux-thunk。你可以使用以下命令进行安装:
npm install react react-dom redux react-redux redux-thunk
创建 Redux Store
在实现 TodoList 应用之前,我们需要先创建一个 Redux store,它将会存储应用程序的全局状态。在本项目中,我们需要存储当前所有待完成和已完成的任务列表。
我们将会创建一个 store.js
文件,用于创建和导出 Redux store:
import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const store = createStore(rootReducer, applyMiddleware(thunk)); export default store;
在上述代码中,我们使用 createStore
方法创建一个 Redux store,传入了一个来自 ./reducers.js
文件的 rootReducer 参数。我们还使用了 applyMiddleware
方法将 thunk
中间件应用到 store 中。
创建 Action
在 Redux 中,Action 是一个包含了数据的普通对象,它描述了发生了什么事件。在本项目中,我们创建了以下 Action:
添加一个待完成任务
export const addTodo = (text) => ({ type: 'ADD_TODO', payload: { id: Date.now(), text, completed: false } });
删除一个已完成任务
export const deleteTodo = (id) => ({ type: 'DELETE_TODO', payload: { id } });
标记一个任务为已完成
export const toggleTodo = (id) => ({ type: 'TOGGLE_TODO', payload: { id } });
创建 Reducer
在 Redux 中,Reducer是用来描述不同 action 如何更新 state 的纯函数。在我们的项目中,我们创建了一个 reducer
文件夹,并在其中创建了 index.js
文件,它导出了一个 rootReducer:
import { combineReducers } from 'redux'; import todoReducer from './todoReducer'; const rootReducer = combineReducers({ todos: todoReducer }); export default rootReducer;
在 todoReducer.js
文件中,我们定义了不同的 Action 如何改变 todos
状态:
-- -------------------- ---- ------- ----- ----------- - ------ - --- ------- -- - ------ ------------- - ---- ----------- ------ ---------- ---------------- ---- -------------- ------ ----------------- -- ------- --- ------------------- ---- -------------- ------ -------------- -- - -- -------- --- ------------------ - ------ - -------- ---------- --------------- -- - ------ ----- --- -------- ------ ------ - -- ------ ------- ------------
在上述代码中,我们使用 switch
语句处理不同的 action。当 ADD_TODO
被触发时,我们使用 [...state, action.payload]
方法更新 state。这将会使用 ES6 的展开运算符,来将一个新的待完成任务添加到当前的任务列表中。
当 DELETE_TODO
被触发时,我们使用 filter
方法来过滤掉指定的任务。
当 TOGGLE_TODO
被触发时,我们使用 map
方法来遍历当前的任务列表,查找到指定的任务,并将它的 completed
属性进行取反,以更新当前任务的完成状态。
创建 React 组件
现在,我们已经准备好了后端的所有逻辑,在本节中,我们将会创建 React 组件来展示 TodoList。
TodoInput 组件
我们将首先创建一个 TodoInput
组件,它将会用于添加待完成的任务。
在 src/components
文件夹中,创建 TodoInput.jsx
文件并声明以下代码:
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ------- - ---- -------------- ------ - ------- - ---- ------------- ----- --------- - -- -------- -- -- - ----- ------ -------- - ------------- ----- ------------ - --- -- - ------------------- -- -------------- - ------- - ------------------------ ------------ -- ------ - ----- ------------------------ ------ ------------ ------------- -- ------------------------ -- ------- ----------------- ------------- ------- -- -- ------ ------- ---------------------
在上述代码中,我们使用 useState
设置了本组件内部的 text
状态。然后我们使用 handleSubmit
方法处理 onSubmit
事件,向 reducer 中添加新的待完成任务。
我们还使用 connect
函数将 TodoInput
组件连接到 Redux store 中,以便我们可以将 addTodo
Action 向 store 分发。
TodoList 组件
接下来,我们将会创建一个用于展示所有待完成和已完成任务的 TodoList
组件。
在 src/components
文件夹中,创建 TodoList.jsx
文件并声明以下代码:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- -------------- ------ - ----------- ---------- - ---- ------------- ----- -------- - -- ------ -------- -- -- - ----- ------------ - ---- -- - ------------------------- -- ----- ------------ - ---- -- - ------------------------- -- ------ - ---- --------------- -- - --- ------------- -------- --------------- -------------- - -------------- - ------ -- - ----- ----------- -- ----------------------- ----------- ------- ------- ----------- -- --------------------------------- ----- --- ----- -- -- ----- --------------- - ----- -- -- ------ ----------- --- ------ ------- -----------------------------------
在上述代码中,我们使用 mapStateToProps
函数将 store 中的 todos
状态映射绑定到当前组件的 props 上。然后我们分别创建了 handleDelete
和 handleToggle
方法用于删除和标记任务为已完成。
TodoApp 组件
现在我们已经创建了两个组件,但是我们还需要将它们封装在一个更高层的容器组件中。在 src/components
文件夹中,创建一个 TodoApp.jsx
组件,内容如下:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --------- ---- -------------- ------ -------- ---- ------------- ----- ------- - -- -- - ------ - ----- ---------- -- --------- -- ------ -- -- ------ ------- --------
在上述代码中,我们导入了 TodoInput
和 TodoList
组件,并将它们渲染在 TodoApp
渲染函数内部。
将 TodoApp 组件渲染至 DOM
在创建了 TodoApp 组件之后,我们需要将它渲染到页面的 DOM 中。在 src
目录下创建一个 index.js
文件,并输入以下代码:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - -------- - ---- -------------- ------ ------- ---- ----------------------- ------ ----- ---- ---------- ---------------- --------- -------------- -------- -- ------------ ------------------------------- --
在上述代码中,我们使用 ReactDOM.render
方法将 TodoApp
组件渲染到 DOM 中。我们还载入了 Redux store,将它作为 Provider
组件的参数,这样我们的所有组件都可以访问到 state 和 dispatch 方法。
总结
本文详细介绍了如何使用 React 和 Redux 来实现一个 TodoList 应用。我们从创建 store 和 action,到 reducer 和组件的创建,以及最后的渲染到 DOM,都进行了详细的讲解。希望通过本文的学习,你能够对 React 和 Redux 的应用有更深入的了解,并且能够应用到自己的项目中。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64c2671a83d39b488166870e