ReactJS Todo App进化之旅：从单文件到组件化，从props透传到redux-toolkit

2023-09-04 01:57:30

ReactJS Todo App 进化之路：从单文件到 redux-toolkit

在前端开发领域，Todo App 作为一项经典练习，它为初学者提供了一个简洁明了的环境，以学习和实践框架的特性。本文将深入探讨 ReactJS Todo App 的进化之路，从单文件应用到组件化、props 透传，再到引入 redux-toolkit，全面展示 ReactJS 及其相关技术栈的使用。

单文件应用：基础入门

最基本的 ReactJS Todo App 是一个单文件应用，其中所有的代码都集中在一个文件中。这种方式简单易懂，但随着应用复杂度的提升，代码量也会随之激增，导致可维护性和可扩展性降低。

组件化：提高可维护性

为了应对日益增长的复杂度，将应用拆分为多个组件是一个明智之举。组件化不仅可以提升代码的可维护性和可扩展性，还使代码更加清晰易懂，便于重用和管理。

props 透传：数据共享

在 ReactJS 中，父组件可以通过 props 将数据传递给子组件。这种机制使我们能够轻松地在组件之间共享数据，从而构建出更复杂、更具交互性的应用。

redux-toolkit：状态管理利器

redux-toolkit 是一款流行的 Redux 工具包，它为管理应用状态提供了简便而强大的途径。Redux 是一种状态管理模式，它将应用的状态集中在一个地方，从而使应用更加易于维护和调试。

示例代码：深入实践

下面是一个 ReactJS Todo App 的示例代码，它展示了组件化、props 透传和 redux-toolkit 的使用：

// store.js
import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./todoSlice";

const store = configureStore({
  reducer: {
    todos: todoReducer,
  },
});

export default store;

// todoSlice.js
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  todos: [],
};

const todoSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.todos.push(action.payload);
    },
    toggleTodo: (state, action) => {
      const todo = state.todos[action.payload];
      todo.completed = !todo.completed;
    },
    removeTodo: (state, action) => {
      state.todos.splice(action.payload, 1);
    },
  },
});

export const { addTodo, toggleTodo, removeTodo } = todoSlice.actions;
export default todoSlice.reducer;

// App.js
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import TodoList from "./TodoList";
import TodoForm from "./TodoForm";
import { addTodo, toggleTodo, removeTodo } from "./todoSlice";

const App = () => {
  const todos = useSelector((state) => state.todos.todos);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(addTodo({ text: "Learn React", completed: false }));
    dispatch(addTodo({ text: "Learn Redux", completed: false }));
    dispatch(addTodo({ text: "Build a Todo App", completed: false }));
  }, [dispatch]);

  return (
    <div>
      <h1>Todo App</h1>
      <TodoForm addTodo={addTodo} />
      <TodoList todos={todos} toggleTodo={toggleTodo} removeTodo={removeTodo} />
    </div>
  );
};

export default App;