React Redux 入门

¥Getting Started with React Redux

React Redux 是 Redux 的官方 React UI 绑定层。它允许你的 React 组件从 Redux 存储读取数据，并将操作分派到存储以更新状态。

¥React Redux is the official React UI bindings layer for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update state.

安装

¥Installation

React Redux 8.x 需要 React 16.8.3 或更高版本/React Native 0.59 或更高版本，才能使用 React Hooks。

¥React Redux 8.x requires React 16.8.3 or later / React Native 0.59 or later, in order to make use of React Hooks.

创建一个 React Redux 应用

¥Create a React Redux App

使用 React 和 Redux 启动新应用的推荐方法是使用我们的 Vite 官方 Redux+TS 模板，或使用接下来是 with-redux 模板创建新的 Next.js 项目。

¥The recommended way to start new apps with React and Redux is by using our official Redux+TS template for Vite, or by creating a new Next.js project using Next's with-redux template.

这两个工具都已经为该构建工具适当配置了 Redux Toolkit 和 React-Redux，并附带了一个小示例应用，演示如何使用 Redux Toolkit 的多个功能。

¥Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.

# Vite with our Redux+TS template
# (using the `degit` tool to clone and extract the template)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# Next.js using the `with-redux` template
npx create-next-app --example with-redux my-app

我们目前没有官方的 React Native 模板，但建议将这些模板用于标准 React Native 和 Expo：

¥We do not currently have official React Native templates, but recommend these templates for standard React Native and for Expo:

现有的 React 应用

¥An Existing React App

要将 React Redux 与你的 React 应用一起使用，请将其作为依赖安装：

¥To use React Redux with your React app, install it as a dependency:

# If you use npm:
npm install react-redux

# Or if you use Yarn:
yarn add react-redux

你还需要在应用中使用安装 Redux 和设置 Redux 存储。

¥You'll also need to install Redux and set up a Redux store in your app.

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

¥React-Redux v8 is written in TypeScript, so all types are automatically included.

API 概述

¥API Overview

`Provider`

React Redux 包含一个 <Provider /> 组件，它使 Redux 存储可供应用的其余部分使用：

¥React Redux includes a <Provider /> component, which makes the Redux store available to the rest of your app:

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

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

import App from './App'

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>,
)

钩子

¥Hooks

React Redux 提供了一对自定义 React hook，允许你的 React 组件与 Redux 存储进行交互。

¥React Redux provides a pair of custom React hooks that allow your React components to interact with the Redux store.

useSelector 从存储状态读取值并订阅更新，而 useDispatch 返回存储的 dispatch 方法以让你分派操作。

¥useSelector reads a value from the store state and subscribes to updates, while useDispatch returns the store's dispatch method to let you 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>
      {/* omit additional rendering output here */}
    </div>
  )
}

学习 React Redux

¥Learning React Redux

学习 Modern Redux 直播

¥Learn Modern Redux Livestream

Redux 维护者 Mark Erikson 出现在 "和杰森一起学习" 节目中，解释了我们今天如何建议使用 Redux。该节目包括一个实时编码的示例应用，展示了如何将 Redux Toolkit 和 React-Redux hooks 与 Typescript 结合使用，以及新的 RTK 查询数据获取 API。

¥Redux maintainer Mark Erikson appeared on the "Learn with Jason" show to explain how we recommend using Redux today. The show includes a live-coded example app that shows how to use Redux Toolkit and React-Redux hooks with Typescript, as well as the new RTK Query data fetching APIs.

请参阅 "学习现代 Redux" 表演注意页面以获取脚本和示例应用源的链接。

¥See the "Learn Modern Redux" show notes page for a transcript and links to the example app source.

React Redux 入门

安装​

创建一个 React Redux 应用​

现有的 React 应用​

API 概述​

Provider​

钩子​

学习 React Redux​

学习 Modern Redux 直播​

安装