react18中react-redux狀態管理怎么實現

這篇文章主要介紹“react18中react-redux狀態管理怎么實現”，在日常操作中，相信很多人在react18中react-redux狀態管理怎么實現問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”react18中react-redux狀態管理怎么實現”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

react的狀態管理還是挺多的現在流行的有以下五種：

• Recoil

• MobX

• XState

• Redux

• Context

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

下面我們來講講redux的優點：

• 可以在眾多組件中傳值，突破react單向數據流的限制

• 不僅支持react還支持vue等主流框架

• 當然是好用方便啦

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

• 在我們有好多組件，但是組件間傳值非常困難的時候在使用redux。

• redux一定要作為最后底牌使用，因為他布局起來有點過程復雜。

接下來我們安裝并使用redux

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

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

• redux不用說了狀態管理

• react-redux，這個插件的話，咱這樣將：就是redux將組件分為了ui組件和容器組件兩類，自然我們平常寫方法，頁面啥的就叫ui組件，redux提供的叫容器組件，這倆組件構成了父子組件，大家記住我這說的話，下面會用到。

• redux-devtools-extension這個特別長的是redux官方提供的可以查看狀態的ui插件，讓我們在很多組件的情況下，也能知道每個組件的數據情況，非常貼心。

• redux-thunk這個插件可以讓redux擁有使用異步操作的能力，本身redux是不支持異步操作的

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

第一步：我們在src目錄下創建一個redux的目錄作為我們狀態管理的文件夾。

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

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

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

• type：這個是標識屬性

• data：顧名思義就是數據

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

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

/*
reduce只管純函數，不管啥偶數加奇數加等等只是一個純函數
* 本身就是一個函數*/    //之前的值，傳過來的值
                     //prestate初始化狀態是null所以得定義一下默認值
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;
    }
}

第五步：下面我們為兄弟組件，上面提到了哦，兄弟組件傳值，沒錯redux就是利用props傳值

在index.js文件中去設置

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

下面我們去使用redux，到組件中去使用，我們可以將ui組件和容器組件聯合到一起寫，根據意思就是使用一個叫connect的單詞來使用在組件中引入(因為使用的是react -18的版本推崇hooks和函數組件，下面例子為函數組件)

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

到此，關于“react18中react-redux狀態管理怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！