react-redux和redux的關系？

redux是react中進行狀態管理的js庫（不是react插件），一般是管理多個組件中共享數據狀態，和vue中的vuex是一樣的

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

react-redux基本使用

1.安裝

npm i react-redux@7 --save

盡量安裝8.0以下的版本，8.0以上會報錯，無法使用connect方法，提示hooks錯誤，provider也無法使用

2.配置

首先，我們在入口文件中配置react-redux的Provider方法，綁定store的redux對象數據

//導入react-redux的provier的組件
import { Provider } from "react-redux"
//...other
root.render(
  <Provider store={store}>
      <Routes />
  </Provider>
);

?注意：Provider的store參數必須寫，如果不寫，他會報錯，他的原理跟我們使用context狀態樹中給provider傳遞的value值一樣

3.組件中使用

在我們要使用的組件中嘗試連接react-redux連接redux的數據

使用步驟

• 導入react-redux依賴包，引入connect方法
• connect有兩個函數參數，mapStateToProps和mapDispatchToProps
• 把redux中state數據和action方法直接映射到組件props屬性中去
• 組件中可以直接通過props使用redux中的數據，調用方法直接調用redux中的action的數據
• 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數據映射到組件內部的變量
const mapStateToProps=(state)=>{
    console.log(state);
    return {
        ...state
    }
}
//把redux中action的操作，可以映射成為組件的props的內部函數
const mapDispathToProps=(dispatch)=>{
     return {
        plus:()=>dispatch({type:'PLUS'})
     }
}
//連接redux的操作的方法
ReactRedux=connect(mapStateToProps,mapDispathToProps)(ReactRedux)

connect方法執行完成以后綁定當前組件，復制完直接拋出即可

我們打印props中的數據會發現我們store中數據會作為props中屬性給我們打印出來

這樣，我們就可以使用props.屬性/方法進行使用