入门 React Redux

React Redux 是 Redux 的官方 React UI 绑定库。它使得你的 React 组件能够从 Redux store 中读取到数据，并且你可以通过dispatch actions去更新 store 中的 state。

安装

React Redux 8.x 需要 React 16.8.3 或更高的版本 / React Native 0.59 或更高的版本，这样我们就可以使用 React Hooks 了。

使用 Create React App

我们推荐你新建一个 React 和 Redux 的应用，运行 Create React App 并选择官方的 Redux+JS 模版或者 Redux+TS 模版，它集成了 Redux Toolkit 和 React Redux 与 React 组件。

# Redux + 普通 JS 模版
npx create-react-app my-app --template redux

# Redux + TypeScript 模版
npx create-react-app my-app --template redux-typescript

一个已有的 React 应用

在你的 React 应用中使用 React Redux，将它作为一个依赖安装：

# 如果你使用 npm:
npm install react-redux

# 或者你使用 Yarn:
yarn add react-redux

你也需要去安装 Redux 并且在你的应用中创建 Redux store。

React-Redux v8 是用 TypeScript 编写的，因此所有的类型都会自动包含在内。

API 概述

Provider

React Redux 包含一个 <Provider /> 组件，这使得 Redux store 能够在应用的其他地方使用：

import React from 'react'
import ReactDOM from 'react-dom/client'

import { Provider } from 'react-redux'
import store from './store'

import App from './App'

// 从 React 18 开始
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

Hooks

React Redux 提供了一对自定义的 React hooks 使得 React 组件能够与 Redux store 通信。

useSelector 从 store state 中读取一个值，并且可以订阅和更新，而 useDispatch 返回 store 的 dispatch 方法让你可以去 dispatch actions。

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {
  decrement,
  increment,
  incrementByAmount,
  incrementAsync,
  selectCount,
} from './counterSlice'
import styles from './Counter.module.css'

export function Counter() {
  const count = useSelector(selectCount)
  const dispatch = useDispatch()

  return (
    <div>
      <div className={styles.row}>
        <button
          className={styles.button}
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          +
        </button>
        <span className={styles.value}>{count}</span>
        <button
          className={styles.button}
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          -
        </button>
      </div>
      {/* 此处省略额外的渲染输出 */}
    </div>
  )
}

学习 React Redux

学习现代 Redux Livestream

Redux 的维护者 Mark Erikson 在 Learn with Jason 节目中，推荐我们如何去使用 Redux。该节目包括一个在线编码的示例应用程序，展示了如何将 Redux Toolkit、React-Redux hooks 与 Typescript 一起使用，以及新的 RTK Query 数据获取 API。

请参阅 the "Learn Modern Redux" show notes page 获取应用源代码的报告和链接。

帮助和讨论

Reactiflux Discord 社区 的 #redux channel 是我们学习和使用所有与 Redux 相关问题的官方资源。Reactiflux 是一个闲逛、提问和学习的好地方 - 快来加入我们吧！

你还可以使用 #redux tag 在 Stack Overflow 上提问。

文档翻译

• 葡萄牙语