redux toolkit 傻瓜教学

一、安装Redux Toolkit 和 React-Redux

npm install @reduxjs/toolkit react-redux

二、创建Redux Store

创建一个src/app/store.js文件，从Redux Toolkit里引入configureStore，我们将从创建和导出一个空的Redux store开始。

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

这里在创建Redux store的同时也会自动配置Redux DevTools的扩展，因此您可以在运行中检查store。

三、在React中使用Redux Store

一旦store创建完成，我们就可以在src/index.js文件中用React-Redux提供的包裹我们的应用，这样我们就可以在React组件中使用React store了。

具体操作就是先引入我们刚刚创建的Redux store，然后用包裹你的，再将store作为一个prop传入。

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

四、创建一个Redux State Slice

创建一个src/features/counter/counterSlice.js文件，在文件里从Redux Toolkit中引入createSlice API。

slice需要一个name作为唯一标识，需要有初始化state值，还需要至少一个reducer方法来定义state如何变化。一旦slice创建完成我们就可以导出生成的Redux action creators和整个slice的reducer方法。

Redux需要我们通过制作数据副本和更新副本来不可变地更新state。然而Redux Toolkit的createSlice 和 createReducer API内部使用了Immer，这允许我们可以直接写更新逻辑，不必制作副本，它将自动成为正确的不可变更新。

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit允许我们在reducers中直接写改变state的逻辑.
      // 由于使用了Immer库,所以并没有真的改变state
      // 而是检测到“草稿state”的更改并根据这些更改生成一个全新的不可变state
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// reducer方法的每一个case都会生成一个Action
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

五、将Slice Reducers添加进Store

接下来我们需要引入counter slice的reducer方法并把它添加到我们的Store中。通过在reducer对象中定义一个属性，我们告诉store使用这个slice reducer方法去处理所有的state更新。

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
})

六、在React组件中使用Redux State和Action

现在我们可以使用React-Redux钩子在React组件中操作Redux store。我们可以使用useSelector从store中读取数据，也可以使用useDispatch来dispatch actions。

创建一个src/features/counter/Counter.js文件，并且在其中开发Counter组件。然后在App.js中引入这个组件，并且在里渲染它。

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'

export function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

现在当你点击 “Increment” 或 "Decrement 按钮时:

• 相应的Redux action会被dispatch进store
• counter slice reducer会根据action更新state
• 组件将会从store中获取到新的state，并且根据新的state重新渲染页面

以上是关于如何在React中设置和使用 Redux Toolkit的简要概述。回顾细节：
1、使用configureStore创建一个Redux Store

• configureStore接收reducer方法作为命名参数，或者说作为reducer对象的属性
• configureStore会使用默认设置自动设置好store

2、在React组件中使用 Redux store

• 用React-Redux提供的 包裹你的
• 使用 传入Redux store

3、使用createSlice创建Redux “slice” reducer

• createSlice需要有name属性作为唯一标识，还需要初始化state和已命名的reducer方法
• Reducer方法通过使用Immer可以直接“改变”state，而不必手动做副本
• 导出生成的slice reducer 和 action creators

4、在React组件中使用React-Redux的useSelector/useDispatch钩子

• 使用useSelector钩子从store中读数据
• 使用useDispatch钩子获取到dispatch方法，并且根据需要dispatch actions