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

redux三大原則

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

redux執(zhí)行流程

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

redux具體使用

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

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ù)的方法

創(chuàng)建reducers出函數(shù)，純函數(shù)有兩個參數(shù)state 初始化的數(shù)據(jù) ，actions修改state數(shù)據(jù)邏輯
switch判斷actions中提交type類型執(zhí)行state修改，返回修改的結(jié)果
createStore方法創(chuàng)建store對象，export default 拋出對象的值
在使用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ù)進行監(jiān)聽，監(jiān)聽頁面數(shù)據(jù)的刷新和更改