🖥️快速开始

安装

添加@reduxjs/toolkit和react-redux依赖包到你的项目中：

pnpm add @reduxjs/toolkit react-redux

创建Redux Store

从 Redux Toolkit 中引入configureStore API，创建一个空的 Redux store，并且导出它。

import { configureStore } from "@reduxjs/toolkit"
​
export default configureStreactore({
  reducer: {}
})

为React提供Redux Store

import React from "react"
import ReactDom from "react-dom"
import App "./App"
import store from "./store"
import { Provider } from "react-redux"
​
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provide>
  </React.StrictMode>,
)

创建Redux State Slice

创建 slcie 需要一个字符串名称来标示切片，一个初始 state 以及一个或多者定义了该如何更新 state 的reducer函数。slcie 创建后，我们可以导出 slice 中生成的 Redux action creators 和 reducer 函数。

import { createSlcie } from "@reduxjs/toolkit"
​
export const counterSlcie = createSlcie({
  name: "counter",
  inititalState: {
    value: 0
  },
  reducers: {
    increment: state => {
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})
​
// 每个 case reducer 函数都会生成对应的 action creators
export const { increment, decrement, incrementByAmount } = counterSlcie.actions
​
export default counterSlice.reducer

将slice Reducers 添加到 Store 中

import { configureStore } from "@reduxjs/toolkit"
import counterReducer from "./counterSlice"
​
export default configureStore({
  reducer: {
    counterSlice: counterReducer
  }
})

在React组件中使用Redux状态和操作

import React from "react"
import { useSelector, useDispatch } from "react-redux"
import { decrement, increment } from "./store/counterSlice"
​
export function Counter() {
  const count = useSelector(state => state.counterSlice.value)
  const diapatch = useDispatch()
  
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>Click</button>
    </div>
  )
}

完整的计数器应用示例