Redux工具包的使用

Redux Toolkit介紹

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

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

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

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

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

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

Redux Toolkit的核心API主要是如下幾個(gè):

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

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

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

Redux Toolkit基本使用

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

reducer: 將slice中的reducer可以組成一個(gè)對(duì)象傳入此處;

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

devTools:是否配置devTools工具，默認(rèn)為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主要包含如下幾個(gè)參數(shù):

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

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

initialState:初始化值

第一次初始化時(shí)的值;

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

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

函數(shù)類似于redux原來(lái)reducer中的一個(gè)case語(yǔ)句;

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

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

createSlice返回值是一個(gè)對(duì)象，包含所有的actions;

import { createSlice } from "@reduxjs/toolkit"

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

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

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

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

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)前計(jì)數(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論