快捷導(dǎo)航

react18中react-redux狀態(tài)管理的實(shí)現(xiàn)

更新時(shí)間：2022年05月03日 11:04:40 作者：會(huì)給我晚安嗎

本文主要介紹了react18中react-redux狀態(tài)管理的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

react的狀態(tài)管理還是挺多的現(xiàn)在流行的有以下五種：

Recoil
MobX
XState
Redux
Context

今天我們來(lái)講一下react眾多狀態(tài)管理之一的redux，雖然這個(gè)我不太喜歡用，但是我覺得簡(jiǎn)單的狀態(tài)管理誰(shuí)都會(huì)，但是難的就是程序員的分水嶺，所以今天來(lái)給大家講一下redux。

下面我們來(lái)講講redux的優(yōu)點(diǎn)：

可以在眾多組件中傳值，突破react單向數(shù)據(jù)流的限制
不僅支持react還支持vue等主流框架
當(dāng)然是好用方便啦

接下來(lái)我們講一下啥時(shí)候去使用他

在我們有好多組件，但是組件間傳值非常困難的時(shí)候在使用redux。
redux一定要作為最后底牌使用，因?yàn)樗季制饋?lái)有點(diǎn)過(guò)程復(fù)雜。

接下來(lái)我們安裝并使用redux

yarn add redux react-redux redux-devtools-extension redux-thunk

安裝好了下面我給大家講一下每個(gè)插件是干嘛的

redux不用說(shuō)了狀態(tài)管理
react-redux，這個(gè)插件的話，咱這樣將：就是redux將組件分為了ui組件和容器組件兩類，自然我們平常寫方法，頁(yè)面啥的就叫ui組件，redux提供的叫容器組件，這倆組件構(gòu)成了父子組件，大家記住我這說(shuō)的話，下面會(huì)用到。
redux-devtools-extension這個(gè)特別長(zhǎng)的是redux官方提供的可以查看狀態(tài)的ui插件，讓我們?cè)诤芏嘟M件的情況下，也能知道每個(gè)組件的數(shù)據(jù)情況，非常貼心。
redux-thunk這個(gè)插件可以讓redux擁有使用異步操作的能力，本身redux是不支持異步操作的

下面我們開始在react中去部署redux。中間會(huì)有點(diǎn)復(fù)雜，提倡大家多打兩遍代碼，畢竟還是內(nèi)句話，簡(jiǎn)單的誰(shuí)都會(huì)，難的才是你和別的程序員的分水嶺。

第一步：我們?cè)趕rc目錄下創(chuàng)建一個(gè)redux的目錄作為我們狀態(tài)管理的文件夾。

第二步：在redux文件夾下創(chuàng)建store.js的文件，作為我們的入口文件

/*
* 該文件專門用于暴露一個(gè)store對(duì)象，整個(gè)應(yīng)用只有一個(gè)store對(duì)象*/
?
//創(chuàng)建redux中作為核心的store ? ? ? ? ? ? ? 支持異步的中間件
import {legacy_createStore as createStore, applyMiddleware} from 'redux'
?
//引入支持異步acton
import thunk from 'redux-thunk'
//引入開發(fā)者工具
import {composeWithDevTools} from 'redux-devtools-extension'
import Reducer from './reducer' ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? 這里為reduces文件這里還沒說(shuō)往下看
export default createStore(Reducer,composeWithDevTools(applyMiddleware(thunk)))

第三步：在redux文件夾下創(chuàng)建actions文件，用來(lái)管理我們的動(dòng)作對(duì)象，包括兩個(gè)一個(gè)是type，data

type：這個(gè)是標(biāo)識(shí)屬性
data：顧名思義就是數(shù)據(jù)

/*
* 專門為count組件生成action對(duì)象*/
export const increment=data=>({type:"add",data})
export const decrement=data=>({type:"inadd",data})
// 異步action就是指action的值為函數(shù)
export const incrementAsync=(data,time)=>{
? ? return (dispatch)=>{
? ? ? ? setTimeout(()=>{
? ? ? ? ? ? dispatch(increment(data))
? ? ? ? },time)
? ? }
}

第四步：在redux文件夾下創(chuàng)建我們較為重要的reducer.js文件，這個(gè)文件為純函數(shù)，里面不允許有任何的操作，加就是加，減就是減，不能有任何的條件或者異步

/*
reduce只管純函數(shù)，不管啥偶數(shù)加奇數(shù)加等等只是一個(gè)純函數(shù)
* 本身就是一個(gè)函數(shù)*/ ? ?//之前的值，傳過(guò)來(lái)的值
? ? ? ? ? ? ? ? ? ? ?//prestate初始化狀態(tài)是null所以得定義一下默認(rèn)值
const initState=0
export default function countReduce(preState=initState,action){
? ? const {type,data}=action
? ? switch (type) {
? ? ? ? case "add":
? ? ? ? ? ? return preState+data
? ? ? ? case "inadd":
? ? ? ? ? ? return preState-data
? ? ? ? default:
? ? ? ? ? ? return preState;
? ? }
}

第五步：下面我們?yōu)樾值芙M件，上面提到了哦，兄弟組件傳值，沒錯(cuò)redux就是利用props傳值

在index.js文件中去設(shè)置

import store from "./redux/store";
import {Provider} from "react-redux";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
? ? <Provider store={store}>
? ? <App />
? ? </Provider>
);

下面我們?nèi)ナ褂胷edux，到組件中去使用，我們可以將ui組件和容器組件聯(lián)合到一起寫，根據(jù)意思就是使用一個(gè)叫connect的單詞來(lái)使用在組件中引入(因?yàn)槭褂玫氖莚eact -18的版本推崇hooks和函數(shù)組件，下面例子為函數(shù)組件)

import {connect} from 'react-redux'
//引入操作方法
import {add,inadd} from '../action'
const app=(props)=>{
? ? //這里log一下如果存在data說(shuō)明redux部署成功了函數(shù)組件這樣取值
? ? console.log(props.count)
? ? 方法就是
? ? porps.add()
? ? return(
? ? ? ? ? ??
? ? )
} ? ? ? ? ? ? ?
export default connect(
? ? //數(shù)據(jù)
? ? state=>({count:state}),
? ? //方法
? ? {
? ? ? ? add,
? ? ? ? inadd ? ?
? ? }
)(app)

好啦上面就是部署redux的全部過(guò)程，大家按照流程多寫兩遍，因?yàn)閞edux有點(diǎn)復(fù)雜，難懂。

到此這篇關(guān)于react18中react-redux狀態(tài)管理的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)react-redux狀態(tài)管理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: