快捷導(dǎo)航

Redux?Toolkit的基本使用示例詳解(Redux工具包)

更新時間：2022年12月22日 14:52:03 作者：藍桉cyq

這篇文章主要介紹了Redux?Toolkit的基本使用,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

Redux工具包的使用

Redux Toolkit介紹

Redux Toolkit 是官方推薦的編寫 Redux 邏輯的方法。

在前面我們學(xué)習(xí)Redux的時候應(yīng)該已經(jīng)發(fā)現(xiàn)，redux的編寫邏輯過于的繁瑣和麻煩。

并且代碼通常分拆在多個文件中(雖然也可以放到一個文件管理，但是代碼量過多，不利于管理);

Redux Toolkit包旨在成為編寫Redux邏輯的標(biāo)準(zhǔn)方式，從而解決上面提到的問題;

在很多地方為了稱呼方便，也將之稱為“RTK”;

安裝Redux Toolkit:npm install @reduxjs/toolkit react-redux

Redux Toolkit的核心API主要是如下幾個:

configureStore: 包裝createStore以提供簡化的配置選項和良好的默認值。它可以自動組合你的 slice reducer，添加你提供的任何 Redux 中間件，redux-thunk默認包含，并啟用 Redux DevTools Extension。

createSlice: 接受reducer函數(shù)的對象、切片名稱和初始狀態(tài)值，并自動生成切片reducer，并帶有相應(yīng)的actions。

createAsyncThunk: 接受一個動作類型字符串和一個返回承諾的函數(shù)，并生成一個pending/fulfilled/rejected基于該承諾分派動作類型的 thunk

Redux Toolkit基本使用

configureStore用于創(chuàng)建store對象，常見參數(shù)如下:

reducer: 將slice中的reducer可以組成一個對象傳入此處;

middleware:可以使用參數(shù)，傳入其他的中間件(自行了解);

devTools:是否配置devTools工具，默認為true;

import { configureStore } from "@reduxjs/toolkit"

// 導(dǎo)入reducer
import counterReducer from "./features/counter"

const store = configureStore({
  reducer: {
    counter: counterReducer
  },
  // 例如可以關(guān)閉redux-devtool
  devTools: false
})

export default store

createSlice主要包含如下幾個參數(shù):

name:用戶標(biāo)記slice的名詞

在之后的redux-devtool中會顯示對應(yīng)的名詞;

initialState:初始化值

第一次初始化時的值;

reducers:相當(dāng)于之前的reducer函數(shù)

對象類型，對象中可以添加很多的函數(shù);

函數(shù)類似于redux原來reducer中的一個case語句;

函數(shù)的參數(shù):

參數(shù)一: state, 當(dāng)前的state狀態(tài)
參數(shù)二: 傳遞的actions參數(shù), actions有兩個屬性, 一個是自動生成的type, 另一個是傳遞的參數(shù)放在payload中;

createSlice返回值是一個對象，包含所有的actions;

import { createSlice } from "@reduxjs/toolkit"

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    counter: 99
  },
  reducers: {
    // 直接對actions解構(gòu)拿到payload
    changeNumber(state, { payload }) {
      state.counter = state.counter + payload
    }
  }
})

// reducers當(dāng)中的方法會放在counterSlice的actions中, 用于派發(fā)action
export const { changeNumber } = counterSlice.actions

// 注意: 導(dǎo)出的是reducer, 用于在index.js中對reducer進行組合
export default counterSlice.reducer

接下來使用store中的counter數(shù)據(jù)和修改counter的操作和之前一樣, 借助于react-redux庫進行連接使用

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { changeNumber } from '../store/features/counter'

export class Home extends PureComponent {
  changeNumber(num) {
    this.props.changeNumber(num)
  }

  render() {
    const { counter } = this.props

    return (
      <div>
        <h2>Home</h2>
        <h2>當(dāng)前計數(shù): {counter}</h2>
        <button onClick={() => this.changeNumber(5)}>+5</button>
        <button onClick={() => this.changeNumber(10)}>+10</button>
      </div>
    )
  }
}

// 映射要使用的store中的數(shù)據(jù)
const mapStateToProps = (state) => ({
  counter: state.counter.counter
})
// 映射要派發(fā)的方法
const mapDispatchToProps = (dispatch) => ({
  changeNumber(num) {
    dispatch(changeNumber(num))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Home)

到此這篇關(guān)于Redux Toolkit的基本使用的文章就介紹到這了,更多相關(guān)Redux Toolkit使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: