快捷導(dǎo)航

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

更新時間：2022年05月03日 11:04:40 作者：會給我晚安嗎

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

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

Recoil
MobX
XState
Redux
Context

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

下面我們來講講redux的優(yōu)點：

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

接下來我們講一下啥時候去使用他

在我們有好多組件，但是組件間傳值非常困難的時候在使用redux。
redux一定要作為最后底牌使用，因為他布局起來有點過程復(fù)雜。

接下來我們安裝并使用redux

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

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

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

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

第一步：我們在src目錄下創(chuàng)建一個redux的目錄作為我們狀態(tài)管理的文件夾。

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

/*
* 該文件專門用于暴露一個store對象，整個應(yīng)用只有一個store對象*/
?
//創(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文件這里還沒說往下看
export default createStore(Reducer,composeWithDevTools(applyMiddleware(thunk)))

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

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

/*
* 專門為count組件生成action對象*/
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文件，這個文件為純函數(shù)，里面不允許有任何的操作，加就是加，減就是減，不能有任何的條件或者異步

/*
reduce只管純函數(shù)，不管啥偶數(shù)加奇數(shù)加等等只是一個純函數(shù)
* 本身就是一個函數(shù)*/ ? ?//之前的值，傳過來的值
? ? ? ? ? ? ? ? ? ? ?//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件，上面提到了哦，兄弟組件傳值，沒錯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ù)意思就是使用一個叫connect的單詞來使用在組件中引入(因為使用的是react -18的版本推崇hooks和函數(shù)組件，下面例子為函數(shù)組件)

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

好啦上面就是部署redux的全部過程，大家按照流程多寫兩遍，因為redux有點復(fù)雜，難懂。

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

您可能感興趣的文章: