Skip to the content.


React ReduxRedux的官方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.


使用Create React App

使用React Redux启动新应用的推荐方式是使用Create React App的官方Redux+JS模板,它利用了Redux工具包。

The recommended way to start new apps with React Redux is by using the official Redux+JS template for Create React App, which takes advantage of Redux Toolkit.

npx create-react-app my-app --template redux


要使用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 store

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

如果你在使用TypeScript, React Redux类型在definelytyped中是单独维护的。你也需要安装这些:

If you are using TypeScript, the React Redux types are maintained separately in DefinitelyTyped. You’ll need to install those as well:

npm install @types/react-redux


React Redux包括一个<Provider />组件,它使Redux store对你的应用程序的其余部分可用:

React Redux includes a component, which makes the Redux store available to the rest of your app:

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

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

import App from './App'

const rootElement = document.getElementById('root')
  <Provider store={store}>
    <App />


React Redux提供了一对自定义的React钩子,允许您的React组件与Redux存储交互。

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


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 {
} from './counterSlice'
import styles from './Counter.module.css'

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

  return (
      <div className={styles.row}>
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        <span className={styles.value}>{count}</span>
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
      {/* omit additional rendering output here */}


reactflux Discord社区的#redux频道是我们关于学习和使用redux的所有问题的官方资源。reactflux是一个很棒的地方来闲逛,问问题和学习-来加入我们吧!

The #redux channel of the Reactiflux Discord community is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us!

您还可以使用#redux标签询问关于Stack Overflow的问题。

You can also ask questions on Stack Overflow using the #redux tag.