react-redux的基本使用
react-redux和redux的關(guān)系？
redux是react中進(jìn)行狀態(tài)管理的js庫（不是react插件），一般是管理多個(gè)組件中共享數(shù)據(jù)狀態(tài)，和vue中的vuex是一樣的
react-redux是redux官方react綁定庫，能夠使react組件從redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以此來更新數(shù)據(jù)，說白了就是用于連接redux，它提供了connect和Provider兩個(gè)Api
react-redux基本使用
1.安裝
npm i react-redux@7 --save
盡量安裝8.0以下的版本，8.0以上會(huì)報(bào)錯(cuò)，無法使用connect方法，提示hooks錯(cuò)誤，provider也無法使用
2.配置
首先，我們在入口文件中配置react-redux的Provider方法，綁定store的redux對象數(shù)據(jù)
//導(dǎo)入react-redux的provier的組件
import { Provider } from "react-redux"
//...other
root.render(
<Provider store={store}>
<Routes />
</Provider>
);注意：Provider的store參數(shù)必須寫，如果不寫，他會(huì)報(bào)錯(cuò)，他的原理跟我們使用context狀態(tài)樹中給provider傳遞的value值一樣
3.組件中使用
在我們要使用的組件中嘗試連接react-redux連接redux的數(shù)據(jù)
使用步驟
- 導(dǎo)入react-redux依賴包，引入connect方法
- connect有兩個(gè)函數(shù)參數(shù)，mapStateToProps和mapDispatchToProps
- 把redux中state數(shù)據(jù)和action方法直接映射到組件props屬性中去
- 組件中可以直接通過props使用redux中的數(shù)據(jù)，調(diào)用方法直接調(diào)用redux中的action的數(shù)據(jù)
- connect（ mapStateToProps，mapDispatchToProps）(組件名)
代碼展示
import React from 'react';
import { connect } from 'react-redux';
export default function ReactRedux(props) {
console.log(props);
return (
<div>
<h3>react-redux</h3>
</div>
)
}
/把redux中的state數(shù)據(jù)映射到組件內(nèi)部的變量
const mapStateToProps=(state)=>{
console.log(state);
return {
...state
}
}
//把redux中action的操作，可以映射成為組件的props的內(nèi)部函數(shù)
const mapDispathToProps=(dispatch)=>{
return {
plus:()=>dispatch({type:'PLUS'})
}
}
//連接redux的操作的方法
ReactRedux=connect(mapStateToProps,mapDispathToProps)(ReactRedux)connect方法執(zhí)行完成以后綁定當(dāng)前組件，復(fù)制完直接拋出即可
我們打印props中的數(shù)據(jù)會(huì)發(fā)現(xiàn)我們store中數(shù)據(jù)會(huì)作為props中屬性給我們打印出來
這樣，我們就可以使用props.屬性/方法進(jìn)行使用
到此這篇關(guān)于react-redux使用的文章就介紹到這了,更多相關(guān)react-redux使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Redux 是一個(gè)狀態(tài)管理庫,它可以幫助你管理應(yīng)用程序中的所有狀態(tài),Redux的核心概念之一是Store,它表示整個(gè)應(yīng)用程序的狀態(tài),這篇文章給大家介紹React中redux的使用,感興趣的朋友一起看看吧2023-12-12
React 中常用的幾種路由跳轉(zhuǎn)方式小結(jié)
基本路由跳轉(zhuǎn)是最常見的一種方式,下面介紹React 中常用的幾種路由跳轉(zhuǎn)方式,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了react國際化react-intl的使用,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
React Native項(xiàng)目框架搭建的一些心得體會(huì)
React Native使你能夠在Javascript和React的基礎(chǔ)上獲得完全一致的開發(fā)體驗(yàn)，構(gòu)建世界一流的原生APP。接下來通過本文給大家分享React Native項(xiàng)目框架搭建的一些心得體會(huì)，感興趣的朋友跟隨小編一起看看吧2021-05-05
本篇文章主要介紹了快速搭建React的步驟詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
圖文示例講解useState與useReducer性能區(qū)別
這篇文章主要為大家介紹了useState與useReducer性能區(qū)別圖文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
最近在處理項(xiàng)目代碼的時(shí)候,出現(xiàn)了一個(gè)bug,組件中的方法在組件卸載后仍然在執(zhí)行,代碼片段發(fā)給我看,但是變量的用意我也不懂,只看到有方法調(diào)用自身方法,這不就是遞歸嘛,所以本文詳細(xì)給大家介紹了React組件卸載怎么中止遞歸方法,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了React中組件之間通信的方式,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
React Router V5:使用HOC組件實(shí)現(xiàn)路由攔截功能
這篇文章主要介紹了React Router V5:使用HOC組件實(shí)現(xiàn)路由攔截功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03
React修改數(shù)組對象的注意事項(xiàng)及說明
這篇文章主要介紹了React修改數(shù)組對象的注意事項(xiàng)及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12