React Redux 简介

React Redux 是一个由 Facebook 开发的库，用于将 React 应用程序的状态管理集中化。它结合了 React 和 Redux，使开发者能够以可预测的方式更新应用程序的状态。

为什么使用 React Redux？

可预测的状态更新：Redux 提供了一个不可变的数据结构，这意味着每次状态更新都会创建一个新的状态对象，这使得状态变化更加可预测。
组件间通信：通过使用 Redux，组件可以通过订阅全局状态来响应状态的变化，而不是通过 props 或 context。
易于调试：Redux 的单一状态树（SSOT）使得状态管理更加清晰，也便于调试。

React Redux 的基本概念

Action：Action 是一个描述发生了什么的普通对象。它是 Redux 应用程序中唯一的数据来源。
Reducer：Reducer 是一个函数，它接收当前的 state 和一个 action，然后返回一个新的 state。
Store：Store 是一个对象，它保存了所有组件的状态，并提供了一些方法来访问和修改状态。

示例

以下是一个简单的 React Redux 示例：

// Action
const increment = () => ({
  type: 'INCREMENT'
});

// Reducer
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

// Store
import { createStore } from 'redux';
const store = createStore(counterReducer);

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

const Counter = ({ count, increment }) => (
  <div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
  </div>
);

const mapStateToProps = state => ({
  count: state
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment())
});

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

扩展阅读

更多关于 React Redux 的信息，您可以阅读以下文章：