React Redux 入门

React Redux 是 React 的官方 UI 绑定层，用于 Redux。它允许您的 React 组件从 Redux store 读取数据，并向 store 派发操作以更新状态。

安装

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

创建 React Redux 应用

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

这两个都已为该构建工具正确配置了 Redux Toolkit 和 React-Redux，并附带一个小型示例应用程序，演示了如何使用 Redux Toolkit 的几个功能。

# 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

现有 React 应用程序

要在您的 React 应用程序中使用 React Redux，请将其安装为依赖项

# If you use npm:
npm install react-redux

# Or if you use 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'

// As of 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 状态读取值并订阅更新，而useDispatch返回 store 的dispatch方法，让您调度操作。

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

学习现代 Redux 直播

Redux 维护者 Mark Erikson 出现在“Learn with Jason”节目中，解释了我们今天推荐如何使用 Redux。该节目包括一个实时编码的示例应用程序，展示了如何使用 Redux Toolkit 和 React-Redux hooks 与 Typescript 以及新的 RTK Query 数据获取 API。

请参阅“学习现代 Redux”节目笔记页面，了解成绩单和示例应用程序源代码的链接。

帮助和讨论

#redux 频道 是 Reactiflux Discord 社区 的官方资源，用于解答所有与学习和使用 Redux 相关的问题。Reactiflux 是一个很棒的地方，可以在这里闲逛、提问和学习 - 快来加入我们吧！

你也可以在 Stack Overflow 上使用 #redux 标签 提问。

文档翻译

葡萄牙语

React Redux 入门

安装​

创建 React Redux 应用​

现有 React 应用程序​

API 概述​

Provider​

Hooks​

学习 React Redux​

学习现代 Redux 直播​

帮助和讨论​

文档翻译​

安装