React Redux应用示例详解

以下是React Redux应用示例详解的完整攻略。

概述

React Redux是一种状态管理工具，可以帮助我们更好地管理React应用的状态。在使用React时，我们会发现应用状态（比如当前页面、用户登录状态等等）变得非常复杂，这时候用React Redux来管理状态就是一个很不错的选择。

本篇攻略将为大家讲解如何使用React Redux管理应用状态，并提供两个示例说明，分别为Todo List和购物车。

步骤

1. 安装React Redux

要使用React Redux，我们需要先安装React和Redux。可以使用npm来安装它们：

npm install react react-dom redux react-redux

以上命令会将React和React DOM、Redux以及React Redux都安装到你的项目中。

2. 创建store

在React Redux中，一个应用只有一个store。store中存储着所有的状态数据，我们可以通过store来管理这些状态数据。

为了创建一个store，需要使用Redux的createStore方法。下面是一个创建store的示例：

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

上面代码中，rootReducer是一个reducer函数，它用来接收当前的状态数据和一个action对象，并根据这个action来修改状态数据。

3. 创建reducer

如上文所述，reducer用来接收当前的状态数据和一个action对象，并根据这个action来修改状态数据。在Redux中，reducer必须是一个纯函数，它不能修改参数的值，而是应该返回一个全新的状态。

下面是一个reducer的示例：

const initialState = {
  todos: []
};

function todoApp(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, {text: action.text}]
      };
    default:
      return state;
  }
}

上面代码中，initialState是一个初始状态，它包含一个空的todos数组。todoApp函数是一个reducer函数，它会根据action的类型来修改状态数据。

4. 创建action

在Redux中，action是一个包含type字段的普通对象。type字段用来描述这个action的类型。根据类型不同，reducer会根据不同的操作进行数据的更新。action通常会包含payload字段，用来描述这个action的具体操作数据。

下面是一个action的示例：

const ADD_TODO_ACTION = 'ADD_TODO';

function addTodoAction(text) {
  return {
    type: ADD_TODO_ACTION,
    text
  };
}

上面代码中，我们定义了一个ADD_TODO_ACTION常量来描述这个action的类型。addTodoAction函数是一个工厂函数，用来返回一个新的action对象。这个对象包含了type和text字段，text字段就是我们要添加的todo的文本。

5. 连接React组件和Redux store

我们使用React Redux来连接React和Redux，从而使React组件可以访问到Redux store中的状态数据。下面是一个连接React组件和Redux store的示例：

import { connect } from 'react-redux';

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

const mapDispatchToProps = dispatch => ({
  addTodo: text => dispatch(addTodoAction(text))
});

const MyComponent = ({ todos, addTodo }) => (
  <div>
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo.text}</li>
      ))}
    </ul>
    <button onClick={() => addTodo('new todo')}>Add Todo</button>
  </div>
);

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

上面代码中，我们使用connect函数来连接MyComponent组件和Redux store。mapStateToProps函数用来将store中的状态数据映射到组件的props中。mapDispatchToProps函数用来将action函数映射到组件的props上，我们可以在组件中调用addTodo函数来添加新的todo。

6. 示例：Todo List

下面是一个使用React Redux来实现Todo List的示例：

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

const ADD_TODO_ACTION = 'ADD_TODO';

const addTodoAction = text => ({
  type: ADD_TODO_ACTION,
  text
});

const TodoList = ({ todos, addTodo }) => {
  const [newTodoText, setNewTodoText] = useState('');

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo.text}</li>
        ))}
      </ul>
      <input type="text" value={newTodoText} onChange={e => setNewTodoText(e.target.value)} />
      <button onClick={() => addTodo(newTodoText)}>Add Todo</button>
    </div>
  );
};

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

const mapDispatchToProps = dispatch => ({
  addTodo: text => dispatch(addTodoAction(text))
});

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

上面代码中，我们创建了一个TodoList组件。这个组件包含一个文本框、一个添加按钮、和一个展示todo的列表。我们使用useState来管理文本框中用户输入的文本，用户点击添加按钮时，会调用addTodo函数，将新的todo添加到状态数据中。

7. 示例：购物车

以下是一个使用React Redux实现购物车的示例：

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

const ADD_ITEM_ACTION = 'ADD_ITEM';
const REMOVE_ITEM_ACTION = 'REMOVE_ITEM';

const addItemAction = item => ({
  type: ADD_ITEM_ACTION,
  item
});

const removeItemAction = item => ({
  type: REMOVE_ITEM_ACTION,
  item
});

const Item = ({ item, onAdd, onRemove }) => (
  <div>
    <span>{item.name}</span>
    <button onClick={() => onAdd(item)}>+</button>
    <button onClick={() => onRemove(item)}>-</button>
  </div>
);

const ShoppingCart = ({ items, addItem, removeItem }) => (
  <div>
    {items.map(item => (
      <Item key={item.id} item={item} onAdd={addItem} onRemove={removeItem} />
    ))}
  </div>
);

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

const mapDispatchToProps = dispatch => ({
  addItem: item => dispatch(addItemAction(item)),
  removeItem: item => dispatch(removeItemAction(item))
});

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

上面代码中，我们创建了两个action，一个添加商品的addItemAction，一个移除商品的removeItemAction。我们还实现了一个Item组件，用来展示单个商品和添加、移除商品的按钮。最后我们创建了一个ShoppingCart组件，用来展示购物车中所有商品。

结论

React Redux提供了一种简单而又强大的状态管理方式，可以轻松地将状态数据传递给React组件，并让组件响应状态的变化。本文提供的两个示例展示了如何使用React Redux来管理一个Todo List和购物车，希望对读者有所启发。