日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react18中react-redux狀態管理的實現_React

作者：會給我晚安嗎 ? 更新時間： 2022-06-28 編程語言

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)

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

原文鏈接：https://blog.csdn.net/weixin_59554510/article/details/124393038

欄目分類
最近更新