React Redux使用設定詳解

2022-08-13 18:01:19

前言

在使用redux之前，首先了解一下redux到底是什麼？

用過vue的肯定知道vuex，vuex是vue中全域性狀態管理工具，主要是用於解決各個元件和頁面之間資料共用問題，對資料採用集中式管理，而且可以通過外掛實現資料持久化

redux跟vuex類似，最主要的就是用作狀態的管理，redux用一個單獨的常數狀態state來儲存整個應用的狀態，可以把它想象成資料庫，用來儲存專案應用中的公共資料

Redux最主要是用作應用狀態的管理。簡言之，Redux用一個單獨的常數狀態樹（state物件）儲存這一整個應用的狀態，這個物件不能直接被改變。當一些資料變化了，一個新的物件就會被建立（使用actions和reducers），這樣就可以進行資料追蹤，實現時光旅行。

redux三大原則

state以單一的物件儲存在store中
state是唯讀的只能通過action修改
使用純函數reducer執行資料的更新

redux執行流程

React元件從store獲取redux中的資料
當頁面資料要進行修改的時候，我們通過dispatch提交actions到store
store把actions提交reducers中執行對應的邏輯，修改state中的資料
更新後的state資料返回到store中，更新React元件頁面上的資料

redux具體使用

在使用redux之前，我們首先要安裝redux，通過下面命令進行安裝

npm i redux --save

安裝好可以在根目錄package.json檔案檢查是否安裝成功

接下來開始設定redux，首先在src目錄下建立一個store資料夾，用來存放redux資料

接著在store新建一個js檔案index.js,在index.js中設定redux內容

執行流程

在index.js中匯入createStore方法，建立redux資料的方法

建立reducers出函數，純函數有兩個引數state 初始化的資料，actions修改state資料邏輯
switch判斷actions中提交type型別執行state修改，返回修改的結果
createStore方法建立store物件，export default 丟擲物件的值
在使用redux的頁面匯入index.js檔案即可

store/index.js

//1. 匯入createStore方法
import { createStore } from "redux";
//2. 建立一個reducer純函數的方法, state初始化資料， actions修改資料行為
const reducer = function (state, actions) {
    //定義初始化的資料
    if (!state) {
        state = {
            count: 10,
        }
    }
    //定義actions的邏輯程式碼區域，處理邏輯的資訊
    switch (actions.type) {
        //呼叫執行+1的邏輯
        case "PLUS":
            return {
                ...state,
                count: state.count + actions.payload,
            }
            break;
        case "JIAN":
            return {
                ...state,
                count:state.count-actions.payload
            }
            break;
        default:
            return {
                ...state
            }
    }
}
//建立store的物件
const store = createStore(reducer);
//丟擲store的物件值
export { store };

redux使用流程

獲取redux中的資料，通過store.getState()

修改資料使用dispatch

dispatch({type:"型別",payload:額外的引數})

home.js

import React, { useEffect, useState } from 'react';
import { store } from './index';
export default function Home(props) {
    const [counts,setCounts]=useState(store.getState().count)
    useEffect(()=>{
        let unsubscribe=store.subscribe(()=>{
            let {count}=store.getState()
            console.log(count);
            setCounts(count)
        })
        return()=>{
            unsubscribe()
        }
    },[])
  return (
    <div>
        <h3>{counts}</h3>
        <button onClick={()=>store.dispatch({type:'PLUS',payload:2})}>count++</button>
        <button onClick={()=>store.dispatch({type:'JIAN',payload:2})}>count--</button>
    </div>
  )
}

直接呼叫方法頁面資料不發生變化，我們使用useEffect和subscribe對資料進行監聽，監聽頁面資料的重新整理和更改

到此這篇關於React Redux使用設定詳解的文章就介紹到這了,更多相關React Redux 內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！