快捷導(dǎo)航

react-redux的基本使用

更新時間：2022年08月12日 10:13:07 作者：是張魚小丸子鴨

react-redux是redux官方react綁定庫，能夠使react組件從redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以此來更新數(shù)據(jù)，這篇文章主要介紹了react-redux使用,需要的朋友可以參考下

react-redux和redux的關(guān)系？

redux是react中進(jìn)行狀態(tài)管理的js庫（不是react插件），一般是管理多個組件中共享數(shù)據(jù)狀態(tài)，和vue中的vuex是一樣的

react-redux是redux官方react綁定庫，能夠使react組件從redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以此來更新數(shù)據(jù)，說白了就是用于連接redux，它提供了connect和Provider兩個Api

react-redux基本使用

1.安裝

npm i react-redux@7 --save

盡量安裝8.0以下的版本，8.0以上會報(bào)錯，無法使用connect方法，提示hooks錯誤，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ù)必須寫，如果不寫，他會報(bào)錯，他的原理跟我們使用context狀態(tài)樹中給provider傳遞的value值一樣

3.組件中使用

在我們要使用的組件中嘗試連接react-redux連接redux的數(shù)據(jù)

使用步驟

導(dǎo)入react-redux依賴包，引入connect方法
connect有兩個函數(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ù)會發(fā)現(xiàn)我們store中數(shù)據(jù)會作為props中屬性給我們打印出來