React and Redux实战：构建交互式待办事项应用

2023-12-11 07:53:26

前言

在现代前端开发中，React和Redux框架因其强大的功能和灵活性而备受推崇。本文将带领您使用这两个框架构建一个交互式的待办事项应用，让您在实践中掌握这些技术的精髓。我们将从搭建项目环境开始，逐步实现待办事项的添加、完成和过滤功能。

项目环境搭建

首先，我们需要搭建项目环境。您可以使用create-react-app工具快速创建一个React项目。只需在终端中运行以下命令：

npx create-react-app todo-app

然后，进入项目目录并安装Redux：

cd todo-app
npm install redux react-redux

创建React组件

接下来，我们需要创建React组件。组件是React应用的基本构建块，每个组件都有自己的状态和行为。在我们的待办事项应用中，我们将创建两个组件：

App组件： 这是应用的主组件，负责管理整体布局和状态。
Todo组件： 这是一个子组件，负责显示单个待办事项及其完成状态。

实现Redux状态管理

Redux是一个状态管理框架，可以帮助我们在应用中管理共享状态。在我们的待办事项应用中，我们将使用Redux来管理待办事项列表。

首先，我们需要创建一个Redux store。store是一个全局对象，用于存储应用的状态。我们可以使用createStore()函数来创建一个store：

import { createStore } from 'redux';

const initialState = {
  todos: []
};

const store = createStore(reducer, initialState);

接下来，我们需要创建一个reducer函数。reducer函数的作用是根据传入的动作（action）来更新store中的状态。在我们的待办事项应用中，我们将使用一个简单的reducer函数来处理添加、完成和过滤待办事项的动作：

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map(todo => {
          if (todo.id === action.payload) {
            return {
              ...todo,
              completed: !todo.completed
            };
          }
          return todo;
        })
      };
    case 'FILTER_TODOS':
      return {
        ...state,
        filter: action.payload
      };
    default:
      return state;
  }
};

最后，我们需要将store与React应用连接起来。我们可以使用Provider组件来实现这一点：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

实现待办事项功能

现在，我们已经搭建好了项目环境和Redux状态管理。接下来，我们需要实现待办事项的功能。

添加待办事项

要添加一个待办事项，我们可以创建一个名为addTodo()的action creator函数。action creator函数的作用是创建一个包含动作类型的对象（action）。然后，我们可以使用dispatch()方法将action发送给store。store会调用reducer函数来更新状态：

const addTodo = (text) => ({
  type: 'ADD_TODO',
  payload: {
    id: Date.now(),
    text: text,
    completed: false
  }
});

store.dispatch(addTodo('Learn React'));

完成待办事项

要完成一个待办事项，我们可以创建一个名为toggleTodo()的action creator函数。action creator函数的作用是创建一个包含动作类型的对象（action）。然后，我们可以使用dispatch()方法将action发送给store。store会调用reducer函数来更新状态：

const toggleTodo = (id) => ({
  type: 'TOGGLE_TODO',
  payload: id
});

store.dispatch(toggleTodo(1));

过滤待办事项

要过滤待办事项，我们可以创建一个名为filterTodos()的action creator函数。action creator函数的作用是创建一个包含动作类型的对象（action）。然后，我们可以使用dispatch()方法将action发送给store。store会调用reducer函数来更新状态：

const filterTodos = (filter) => ({
  type: 'FILTER_TODOS',
  payload: filter
});

store.dispatch(filterTodos('completed'));

构建UI界面

现在，我们已经实现了待办事项的功能。接下来，我们需要构建UI界面。

我们可以使用React组件来构建UI界面。组件是React应用的基本构建块，每个组件都有自己的状态和行为。在我们的待办事项应用中，我们将使用两个组件：

App组件： 这是应用的主组件，负责管理整体布局和状态。
Todo组件： 这是一个子组件，负责显示单个待办事项及其完成状态。

我们可以使用JSX语法来定义组件。JSX是一种类似于HTML的语法，但它可以被JavaScript解析。

以下是App组件的代码：

import React, { useState } from 'react';
import { connect } from 'react-redux';

import Todo from './Todo';
import { addTodo, toggleTodo, filterTodos } from '../actions';

const App = ({ todos, filter, addTodo, toggleTodo, filterTodos }) => {
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = (e) => {
    e.preventDefault();

    if (newTodo.trim() === '') {
      return;
    }

    addTodo(newTodo);
    setNewTodo('');
  };

  const handleToggleTodo = (id) => {
    toggleTodo(id);
  };

  const handleFilterTodos = (filter) => {
    filterTodos(filter);
  };

  const filteredTodos = todos.filter((todo) => {
    switch (filter) {
      case 'active':
        return !todo.completed;
      case 'completed':
        return todo.completed;
      default:
        return true;
    }
  });

  return (
    <div className="container">
      <h1>Todo App</h1>

      <form onSubmit={handleAddTodo}>
        <input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
        <button type="submit">Add</button>
      </form>

      <ul>
        {filteredTodos.map((todo) => (
          <Todo key={todo.id} todo={todo} toggleTodo={handleToggleTodo} />
        ))}
      </ul>

      <div className="filters">
        <button onClick={() => handleFilterTodos('all')}>All</button>
        <button onClick={() => handleFilterTodos('active')}>Active</button>
        <button onClick={() => handleFilterTodos('completed')}>Completed</button>
      </div>
    </div>
  );
};

const mapStateToProps = (state) => ({
  todos: state.todos,
  filter: state.filter
});

const mapDispatchToProps = {
  addTodo,
  toggleTodo,
  filterTodos
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

以下是Todo组件的代码：

import React from 'react';

const Todo = ({ todo, toggleTodo }) => {
  return (
    <li className="todo">
      <label>
        <input type="checkbox" checked={todo.completed} onChange={() => toggleTodo(todo.id)} />
        <span>{todo.text}</span>
      </label>
    </li>
  );
};

export default Todo;