前言

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

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

redux跟vuex類似，最主要的就是用作狀態(tài)的管理，redux用一個單獨(dú)的常量狀態(tài)state來保存整個應(yīng)用的狀態(tài)，可以把它想象成數(shù)據(jù)庫，用來保存項(xiàng)目應(yīng)用中的公共數(shù)據(jù)

Redux最主要是用作應(yīng)用狀態(tài)的管理。簡言之，Redux用一個單獨(dú)的常量狀態(tài)樹（state對象）保存這一整個應(yīng)用的 狀態(tài)，這個對象不能直接被改變。當(dāng)一些數(shù)據(jù)變化了，一個新的對象就會被創(chuàng)建（使用actions和reducers），這 樣就可以進(jìn)行數(shù)據(jù)追蹤，實(shí)現(xiàn)時光旅行。

redux三大原則

1. state以單一的對象存儲在store中
2. state是只讀的只能通過action修改
3. 使用純函數(shù)reducer執(zhí)行數(shù)據(jù)的更新

redux執(zhí)行流程

1. React組件從store獲取redux中的數(shù)據(jù)
2. 當(dāng)頁面數(shù)據(jù)要進(jìn)行修改的時候，我們通過dispatch提交actions到store
3. store把a(bǔ)ctions提交reducers中執(zhí)行對應(yīng)的邏輯，修改state中的數(shù)據(jù)
4. 更新后的state數(shù)據(jù)返回到store中，更新React組件頁面上的數(shù)據(jù)

redux具體使用

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

npm i redux --save

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

接下來開始配置redux，首先在src目錄下創(chuàng)建一個store文件夾，用來存放redux數(shù)據(jù)

接著在store新建一個js文件index.js,在index.js中配置redux內(nèi)容

執(zhí)行流程

在index.js中導(dǎo)入createStore方法，創(chuàng)建redux數(shù)據(jù)的方法

1. 創(chuàng)建reducers出函數(shù)，純函數(shù)有兩個參數(shù)state 初始化的數(shù)據(jù) ，actions修改state數(shù)據(jù)邏輯
2. switch判斷actions中提交type類型執(zhí)行state修改，返回修改的結(jié)果
3. createStore方法創(chuàng)建store對象，export default 拋出對象的值
4. 在使用redux的頁面導(dǎo)入index.js文件即可

store/index.js

//1. 導(dǎo)入createStore方法
import { createStore } from "redux";
//2. 創(chuàng)建一個reducer純函數(shù)的方法, state初始化數(shù)據(jù)， actions修改數(shù)據(jù)行為
const reducer = function (state, actions) {
    //定義初始化的數(shù)據(jù)
    if (!state) {
        state = {
            count: 10,
        }
    }
    //定義actions的邏輯代碼區(qū)域，處理邏輯的信息
    switch (actions.type) {
        //調(diào)用執(zhí)行+1的邏輯
        case "PLUS":
            return {
                ...state,
                count: state.count + actions.payload,
            }
            break;
        case "JIAN":
            return {
                ...state,
                count:state.count-actions.payload
            }
            break;
        default:
            return {
                ...state
            }
    }
}
//創(chuàng)建store的對象
const store = createStore(reducer);
//拋出store的對象值
export { store };

redux使用流程

獲取redux中的數(shù)據(jù)，通過store.getState()

修改數(shù)據(jù)使用dispatch

dispatch({type:"類型",payload:額外的參數(shù)})

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>
  )
}

直接調(diào)用方法頁面數(shù)據(jù)不發(fā)生變化，我們使用useEffect和subscribe對數(shù)據(jù)進(jìn)行監(jiān)聽，監(jiān)聽頁面數(shù)據(jù)的刷新和更改

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

最新評論