React Redux 官方文档教程概览

React Redux 是一个用于管理 React 应用状态的高效库。以下是一些官方文档中的关键教程，帮助您更好地理解和使用 React Redux。

安装与设置

首先，确保您的项目中已经安装了 React 和 Redux。

npm install react react-redux

基础概念

Action 和 Reducer

Action 是一个描述发生了什么的普通对象。Reducer 是一个纯函数，它接收当前 state 和一个 action，并返回一个新的 state。

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

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

连接 React 和 Redux

使用 connect 高阶组件，您可以将 React 组件连接到 Redux store。

import { connect } from 'react-redux';

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

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

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});

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

高级特性

Middleware

Middleware 允许您在不修改原有代码的情况下，扩展 Redux 的功能。

import thunk from 'redux-thunk';

const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

Selector

Selector 是一个从 Redux store 中提取数据的函数。

const selectCount = state => state.count;

扩展阅读

更多关于 React Redux 的内容，请访问 React Redux 官方文档。

React Redux

以上是 React Redux 官方文档中的部分教程概览。希望这些内容能帮助您更好地理解和应用 React Redux。