入门 Redux Toolkit

目标

Redux Toolkit 包旨在成为编写 Redux 逻辑的标准方式。它最初是为了解决 Redux 的三个常见问题而创建的：

"配置 Redux store 过于复杂"
"我需要添加许多包才能让 Redux 做任何事情"
"Redux 需要太多样板代码"

我们无法解决所有问题，但秉承 create-react-app 的精神，我们可以尝试提供一些工具来抽象设置过程并处理最常见的场景，以及包含一些有用的实用程序，让用户简化他们的应用程序代码。

Redux Toolkit 还包含一个强大的数据获取和缓存功能，我们将其称为"RTK Query"。它作为单独的一组入口点包含在包中。它是可选的，但可以消除手动编写数据获取逻辑的需要。

这些工具应该对所有 Redux 用户都很有益处。无论你是全新的 Redux 用户设置你的第一个项目，还是想要简化现有应用程序的经验丰富用户，Redux Toolkit 都可以帮助你改进你的 Redux 代码。

安装

为了确保可以使用React Hooks, Redux Toolkit 8.x 需要依赖于 React 16.8.3 或更高版本/React Native 0.59 或更高版本

使用 Create React App

用 React 和 Redux 构建新应用的推荐方式是使用 Create React App 的官方 Redux+JS 或 Redux+TS 模板。这些模板利用了 Redux Toolkit 和它与 React 组件的集成，因此无需手动配置。

arduino 复制代码

# Redux + Plain JS template
npx create-react-app my-app --template redux

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

对于现存的 React APP

为了能在你的 React APP 中使用 Redux Toolkit,需先安装依赖:

ini 复制代码

# If you use npm:
npm install react-redux

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

你还需要安装 Redux 并在你的应用程序中设置一个 Redux 存储。

React-Redux v8 是用 TypeScript 编写的，故所有的类型都已包含在内

API 概览

`Provider`

Redux Toolkit 包括 Provider 组件, 该组件为你的 app 提供了可用的 Redux Store

jsx 复制代码

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

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

useSelector 从 store state 读取值并订阅更新，而 useDispatch 返回 store 的调度方法以让你分发 actions。

jsx 复制代码

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