Redux Documentation for React Framework

Redux 是一个用于 JavaScript 应用程序的状态管理库，常与 React 框架一起使用。以下是一些关于 Redux 在 React 中的基本概念和用法。

安装 Redux

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

npm install react redux
# 或者
yarn add react redux

Redux 的核心概念

Actions

Action 是一个描述发生了什么的普通对象。它是 Redux 应用程序与 Redux store 交互的唯一方式。

const ADD_TODO = 'ADD_TODO';

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

Reducers

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

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

Store

Store 是一个对象，它将 actions 和 reducers 连接在一起。它是 Redux 应用的唯一中心。

import { createStore } from 'redux';

const store = createStore(todos);

使用 Redux 在 React 中

在组件中使用 connect

React Redux 提供了一个 connect 方法，它可以将组件连接到 Redux store。

import { connect } from 'react-redux';

class TodoApp extends React.Component {
  render() {
    return (
      <div>
        <AddTodo />
        <TodoList todos={this.props.todos} />
      </div>
    );
  }
}

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

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

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

图片

Redux 是一个强大的工具，它可以帮助你更好地管理 React 应用的状态。以下是一些关于 Redux 的图片，供你参考。

Redux Architecture
Redux Action
Redux Reducer
Redux Store