前言

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

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

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

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

redux三大原則

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

redux執(zhí)行流程

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

redux具體使用

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

npm i redux --save

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

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

接著在store新建一個(gè)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ù)有兩個(gè)參數(shù)state 初始化的數(shù)據(jù) ，actions修改state數(shù)據(jù)邏輯
2. switch判斷actions中提交type類型執(zhí)行state修改，返回修改的結(jié)果
3. createStore方法創(chuàng)建store對(duì)象，export default 拋出對(duì)象的值
4. 在使用redux的頁(yè)面導(dǎo)入index.js文件即可

store/index.js

//1. 導(dǎo)入createStore方法
import { createStore } from "redux";
//2. 創(chuàng)建一個(gè)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的對(duì)象
const store = createStore(reducer);
//拋出store的對(duì)象值
export { store };

redux使用流程

獲取redux中的數(shù)據(jù)，通過(guò)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)用方法頁(yè)面數(shù)據(jù)不發(fā)生變化，我們使用useEffect和subscribe對(duì)數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)，監(jiān)聽(tīng)頁(yè)面數(shù)據(jù)的刷新和更改

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

最新評(píng)論