日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：藍桉cyq ? 更新時間： 2023-01-27 編程語言

Redux工具包的使用

Redux Toolkit介紹

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

在前面我們學習Redux的時候應該已經發現，redux的編寫邏輯過于的繁瑣和麻煩。

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

Redux Toolkit包旨在成為編寫Redux邏輯的標準方式，從而解決上面提到的問題;

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

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

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

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

createSlice: 接受reducer函數的對象、切片名稱和初始狀態值，并自動生成切片reducer，并帶有相應的actions。

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

Redux Toolkit基本使用

configureStore用于創建store對象，常見參數如下:

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

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

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

import { configureStore } from "@reduxjs/toolkit"

// 導入reducer
import counterReducer from "./features/counter"

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

export default store

createSlice主要包含如下幾個參數:

name:用戶標記slice的名詞

在之后的redux-devtool中會顯示對應的名詞;

initialState:初始化值

第一次初始化時的值;

reducers:相當于之前的reducer函數

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

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

函數的參數:

  • 參數一: state, 當前的state狀態
  • 參數二: 傳遞的actions參數, actions有兩個屬性, 一個是自動生成的type, 另一個是傳遞的參數放在payload中;

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

import { createSlice } from "@reduxjs/toolkit"

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

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

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

接下來使用store中的counter數據和修改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>當前計數: {counter}</h2>
        <button onClick={() => this.changeNumber(5)}>+5</button>
        <button onClick={() => this.changeNumber(10)}>+10</button>
      </div>
    )
  }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(Home)

原文鏈接：https://blog.csdn.net/m0_71485750/article/details/126764581

欄目分類
最近更新