React Redux 是一个用于在 React 应用程序中管理状态的高效方式。它结合了 React 和 Redux，使得状态管理变得更加简单和可预测。

快速概览

  • React: 一个用于构建用户界面的 JavaScript 库。
  • Redux: 一个状态容器，用于管理应用程序的状态。

React Redux 通过将 Redux 与 React 结合，提供了一种将状态管理逻辑与 UI 组件分离的方法。

安装

首先，确保你已经安装了 React 和 Redux。你可以使用 npm 或 yarn 来安装它们：

npm install react react-dom redux

或者

yarn add react react-dom redux

基本概念

Action

Action 是一个描述发生了什么的普通对象。它是 Redux 状态变化的唯一来源。

const ADD_TODO = 'ADD_TODO';

const addTodo = text => ({
  type: ADD_TODO,
  payload: text
});

Reducer

Reducer 是一个函数，它接收当前的状态和一个 action，然后返回一个新的状态。

const todos = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
};

Store

Store 是一个对象，它将所有的 state、action 和 reducer 结合在一起。它提供了一个 dispatch 方法来发送 action，以及一个 subscribe 方法来监听状态变化。

import { createStore } from 'redux';

const store = createStore(todos);

使用 React Redux

在组件中使用 connect

connect 是一个函数，它将 React 组件与 Redux store 连接起来。

import { connect } from 'react-redux';

const TodoList = ({ todos }) => (
  <ul>
    {todos.map(todo => (
      <li key={todo}>{todo}</li>
    ))}
  </ul>
);

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

export default connect(mapStateToProps)(TodoList);

在组件中发送 Action

在组件中，你可以使用 dispatch 方法来发送 action。

class TodoApp extends React.Component {
  addTodo = text => {
    this.props.dispatch(addTodo(text));
  };

  render() {
    return (
      <div>
        <TodoList todos={this.props.todos} />
        <input
          onChange={e => this.setState({ text: e.target.value })}
          value={this.state.text}
        />
        <button onClick={() => this.addTodo(this.state.text)}>
          Add Todo
        </button>
      </div>
    );
  }
}

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

export default connect(mapStateToProps)(TodoApp);

扩展阅读

更多关于 React Redux 的信息，请访问官方文档：React Redux 官方文档

图片展示

React Redux 示例

React_Redux_example

Redux Store 架构

Redux_Store_architecture