解锁 React-Redux 的奥秘：入门实战指南

2023-11-09 18:52:53

引言

踏上 React-Redux 的探索之旅，让我们开启一段激动人心的旅程。本文并非 React-Redux 的枯燥理论介绍，而是旨在通过一个生动的入门实战案例，为你打开知识的大门。准备好沉浸在代码的海洋中，一步步掌握 React-Redux 的精髓！

React-Redux 入门案例

背景

想象一下，你是一个踌躇满志的开发人员，肩负着为一家初创企业构建一个全新的待办事项应用程序的重任。为了实现复杂且交互繁多的功能，你决定采用 React-Redux 作为你的利器。

步骤 1：安装依赖项

首先，让我们安装必需的依赖项：

npm install react-redux redux

步骤 2：创建 Redux Store

Redux 的核心是一个存储应用程序状态的中央仓库，称为 Store。创建 Store 如下：

import { createStore } from 'redux';

const initialState = {
  todos: [],
};

const store = createStore(reducer, initialState);

步骤 3：定义 Reducer

Reducer 是一个纯函数，用于根据派发的动作来更新 Store 中的状态。对于我们的待办事项应用程序，Reducer 如下：

import { ADD_TODO, TOGGLE_TODO, REMOVE_TODO } from './actions';

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 => (todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo)),
      };
    case REMOVE_TODO:
      return { ...state, todos: state.todos.filter(todo => todo.id !== action.payload.id) };
    default:
      return state;
  }
};

步骤 4：创建 Action

Action 是应用程序状态改变意图的对象。对于我们的待办事项应用程序，Action 如下：

import { v4 as uuidv4 } from 'uuid';

export const addTodo = text => ({
  type: ADD_TODO,
  payload: {
    id: uuidv4(),
    text,
    completed: false,
  },
});

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

export const removeTodo = id => ({
  type: REMOVE_TODO,
  payload: {
    id,
  },
});

步骤 5：连接组件到 Redux

为了让 React 组件能够访问 Redux Store，我们需要使用 connect() 方法。它将组件连接到 Store，并提供访问 state 和派发 action 的道具：

import { connect } from 'react-redux';

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

const mapDispatchToProps = dispatch => ({
  addTodo: text => dispatch(addTodo(text)),
  toggleTodo: id => dispatch(toggleTodo(id)),
  removeTodo: id => dispatch(removeTodo(id)),
});

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

步骤 6：构建 React 组件

最后，让我们构建一个简单的 React 组件来显示待办事项列表：

import React from 'react';

const TodoList = ({ todos, addTodo, toggleTodo, removeTodo }) => (
  <div>
    <input type="text" onKeyPress={e => e.key === 'Enter' && addTodo(e.target.value)} />
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <input type="checkbox" checked={todo.completed} onChange={() => toggleTodo(todo.id)} />
          <span>{todo.text}</span>
          <button onClick={() => removeTodo(todo.id)}>X</button>
        </li>
      ))}
    </ul>
  </div>
);

export default TodoList;