如何使用Redux Toolkit簡化Redux

更新時間：2022年12月22日 10:57:59 作者：咸蛋超人l

redux-toolkit是目前redux官方推薦的編寫redux邏輯的方法，針對redux的創(chuàng)建store繁瑣、樣板代碼太多、依賴外部庫等問題進行了優(yōu)化，官方總結(jié)了四個特點是簡易的/有想法的/強勁的/高效的，總結(jié)來看，就是更加的方便簡單了

一、安裝Redux Toolkit和React-Redux

注： “@reduxjs/toolkit”: “^1.8.6”, “react-redux”: “^8.0.4”

npm install @reduxjs/toolkit react-redux

二、創(chuàng)建Redux Store

從Redux Toolkit里引入configureStore，我們將從創(chuàng)建和導(dǎo)出一個空的Redux store開始。

store/index.js
// 使用rtk來創(chuàng)建store
import { configureStore } from '@reduxjs/toolkit'
import useReducer from './userSlice'
/* 
使用rtk的時候，reducer依然可以使用之前的創(chuàng)建不變
但是不再需要去合并reducer combineReducers
rtk提供了configureStore方法，直接接收一個對象作為參數(shù)
可以將reducer的相關(guān)配置直接通過這個對象進行傳遞，不再需單獨合并reducer
reducer屬性可以直接單獨傳遞一個ruducer,也可以傳遞一個對象
*/
const store = configureStore({
  reducer: {
    user: useReducer
  }
})
export default store

三、在React中使用Redux Store

我們就可以在src/index.js文件中用React-Redux提供的包裹我們的應(yīng)用，這樣我們就可以在React組件中使用React store了

具體操作就是先引入我們剛剛創(chuàng)建的Redux store，然后用包裹你的，再將store作為一個prop傳入。

src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { Provider } from 'react-redux'
import store from './store'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

四、創(chuàng)建一個Redux State Slice

slice需要一個name作為唯一標(biāo)識，需要有初始化state值，還需要至少一個reducer方法來定義state如何變化。一旦slice創(chuàng)建完成我們就可以導(dǎo)出生成的Redux action creators和整個slice的reducer方法。

Redux需要我們通過制作數(shù)據(jù)副本和更新副本來不可變地更新state。然而Redux Toolkit的createSlice 和 createReducer API內(nèi)部使用了Immer，這允許我們可以直接寫更新邏輯，不必制作副本，它將自動成為正確的不可變更新。

userSlice.js文件

// 切片對象
import { createSlice } from '@reduxjs/toolkit'
/* 
reducer切片
createSlice函數(shù)的作用：生成分片的reducer
內(nèi)部調(diào)用的市createAction和createReducer 
creatSlice可以幫助我們用更少的代碼去生成配套的reducer和action,而且有很好的維護性
*/
const userSlice = createSlice({
  name: 'zhangsan', // 標(biāo)識符，生成actions的時候要使用，
  // state初始值
  initialState: {
    name: '張三',
    age: 18,
    gender: '男'
  } ,
  // reducer的具體方法，
  reducers: {
    // 指定state的各種操作，直接就可以在對象中添加方法
    setName(state, action) {
      /* 
      可以通過不同的方法修來指定對state的不同的操作
      state，action 
      可以直接修改state => state 是一個代理對象  之前的復(fù)制一份，返回一個新的對象
      */
      state.name = action.payload
    },
    setAge(state, action) {
      state.age = action.payload
    }
  }
})
/* 
切片對象會自動地幫助我們生成action
切片對象會根據(jù)我們地reducers方法來自動地創(chuàng)建action對象，這些action對象會保存到切片對象的actions中
{type:name/函數(shù)名，payload:函數(shù)的參數(shù)}
*/
// 實際開發(fā)中，setName，setAge對外暴露，
export const { setName, setAge } = userSlice.actions
export default userSlice.reducer

五、在React組件中使用Redux State和Action

現(xiàn)在我們可以使用React-Redux鉤子在React組件中操作Redux store。我們可以使用useSelector從store中讀取數(shù)據(jù)，也可以使用useDispatch來dispatch actions。

src/App.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setName, setAge } from './store/userSlice'
export default function App() {
  const user = useSelector(state => state.user)
  const dispatch = useDispatch()
  const setNameHandler = () => {
    dispatch(setName('李四'))
  }
  const setAgeHandler = () => {
    dispatch(setAge(20))
  }
  return (
    <div>
      <h1>{user.name}</h1>
      <h1>{user.age}</h1>
      <h1>{user.gender}</h1>
      <button onClick={setNameHandler}>修改name</button>
      <button onClick={setAgeHandler}>修改年齡</button>
    </div>
  )
}

以上是關(guān)于如何在React中設(shè)置和使用 Redux Toolkit的簡要概述?；仡櫦?xì)節(jié)：

1、使用configureStore創(chuàng)建一個Redux Store