React Redux使用配置詳解

Posted on by

前言

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

用過vue的肯定知道vuex，vuex是vue中全局狀態管理工具，主要是用於解決各個組件和頁面之間數據共享問題，對數據采用集中式管理，而且可以通過插件實現數據持久化

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

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

redux三大原則

  1. state以單一的對象存儲在store中
  2. state是隻讀的隻能通過action修改
  3. 使用純函數reducer執行數據的更新

redux執行流程

  1. React組件從store獲取redux中的數據
  2. 當頁面數據要進行修改的時候，我們通過dispatch提交actions到store
  3. store把actions提交reducers中執行對應的邏輯，修改state中的數據
  4. 更新後的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數據的方法

  1. 創建reducers出函數，純函數有兩個參數state 初始化的數據 ，actions修改state數據邏輯
  2. switch判斷actions中提交type類型執行state修改，返回修改的結果
  3. createStore方法創建store對象，export default 拋出對象的值
  4. 在使用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 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：