使用 React Redux 入門

React Redux 是 React 給 Redux 的官方 UI 綁定層。它讓 React 組件能從 Redux 儲存庫讀取資料，並對儲存庫送出動作來更新狀態。

安裝

React Redux 8.x 需要 React 16.8.3 以上 / React Native 0.59 以上，才能使用 React Hooks。

建立 React Redux App

使用 React 和 Redux 開始新應用程式的建議方式是運用針對 Vite 的官方 Redux+TS 範本，或是使用 Next.js 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 儲存。

React-Redux v8 使用 TypeScript 編寫，因此所有類型都會自動包含。

API 概觀

`提供者`

React Redux 包含一個 <Provider /> 元件，它讓整個應用程式都能使用 Redux 儲存

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>,
)

Hook

React Redux 提供一組自訂 React Hook，讓你的 React 元件可以與 Redux 儲存互動。

useSelector 從儲存狀態讀取一個值，並訂閱更新，而 useDispatch 會傳回儲存的 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 維護者馬克·艾瑞克森出現在「跟 Jason 一起學習」節目中，說明我們建議現在如何使用 Redux。展示中包含一個現場編寫的示範應用程式，展示如何將 Redux Toolkit 和 React-Redux Hook 與 Typescript 搭配使用，以及新的 RTK Query 資料擷取 API。

請參閱「學習現代 Redux」節目註記頁面，取得範例應用程式的 transcript 和連結。

說明和討論

#redux 頻道是Reactiflux Discord 社群中與學習和使用 Redux 相關問題的所有官方資源。Reactiflux 是個非常棒的地方，可以在這裡消磨時間、發問和學習——來加入我們吧！

你也可以在Stack Overflow上發問，並使用#redux 標籤。

文件翻譯

葡萄牙語

使用 React Redux 入門

安裝​

建立 React Redux App​

現有的 React 應用程式​

API 概觀​

提供者​

Hook​

學習 React Redux​

學習現代 Redux 直播​

說明和討論​

文件翻譯​

安裝