react-redux是使用redux開發react時使用的一個外掛，另外插一句，redux不是react的產品，vue和angular中也可以使用redux；下面簡單講解，如何使用react-redux來開發react。

描述
這個外掛可以讓我們的redux程式碼更加的簡潔和美觀。我假設你已經有一個使用create-react-app建立的一個可以顯示hello world的react環境，並且已經安裝來redux。
注意：如果是剛使用create-react-app建立的，需要執行 npm run eject彈出個性化設定，這樣就可以自定義配置
安裝

npm i react-redux --save
 

使用
react-redux提供了兩個重要的介面：Provider、connect,使用了這個外掛，react-redux的subscribe和dispatch就可以忘記來，它們就用不著了。
程式碼結構

//index.js
 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { reducer } from './index.redux';
import { Provider } from 'react-redux'
 
const store = createStore(reducer, applyMiddleware(thunk));
 
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
 
registerServiceWorker();
 

Provider中應用的最外層，把store傳給它，只使用一次

//app.js
 
import React, { Component } from 'react';
import { addCreator, removeCreator, addAsync } from './index.redux';
import { connect } from 'react-redux';
class App extends Component {
 render() {
  return (
   <div className="App">
    <h1>現在有美女{this.props.num}個。</h1>
    <button onClick={this.props.addCreator}>add</button>
    <button onClick={this.props.removeCreator}>remove</button>
    <button onClick={this.props.addAsync}>addAsync</button>
   </div >
  );//歡迎加入全棧開發交流圈一起學習交流：864305860
 }//面向1-3年前端人員
}//幫助突破技術瓶頸，提升思維能力
 
//定義把state中哪個屬性放到props中
 function mapStateToProps(state) {
  return { num: state }
 }
 //定義把哪些方法放到props中
 const actionCreators={ addCreator, removeCreator, addAsync };
 //connect其實就是一個高階元件，把app傳進去，返回一個新的app元件
 App = connect(mapStateToProps, actionCreators)(App);
export default App;
 

connect負責從外部獲取元件需要的引數。通過connect定義後，放到props中的屬性和方法就可以直接通過this.props來獲取。
下面是reducer的定義。

//react.redux.js
 
const Add = 'addGirl', Remove = "removeGirl";
 
export function reducer(state = 0, action) {
  switch (action.type) {
    case Add:
      return state + 1;
    case Remove:
      return state - 1;
    default:
      return 10;//歡迎加入全棧開發交流圈一起學習交流：864305860
  }//面向1-3年前端人員
}//幫助突破技術瓶頸，提升思維能力
 
export function addCreator() {
  return { type: Add };
}
export function removeCreator() {
  return { type: Remove };
}
 
export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

使用裝飾器優雅的寫Conect
首先需要安裝babel-plugin-transform-decorators-legacy,並在package.json中配置。
安裝
npm i babel-plugin-transform-decorators-legacy --save-dev 這個只是開發使用，所以安裝到–save-dev
配置
配置babel的plugins屬性

"babel": {
 "presets": [
  "react-app"
 ],
 "plugins": [
  ["transform-decorators-legacy"]
 ]//歡迎加入全棧開發交流圈一起學習交流：864305860
}

修改原來寫法
使用@connect來重新定義，寫到class的上頭即可。

//App.js
 
@connect((state) => ({ num: state }),{ addCreator, removeCreator, addAsync })
class App extends Component {
 
// function mapStateToProps(state) {
//  return { num: state }
// }//歡迎加入全棧開發交流圈一起學習交流：864305860
// App = connect(mapStateToProps, { addCreator, removeCreator, addAsync })(App);

VS Code 裝飾器提示“experimentalDecorators”的解決辦法
點選Visual Studio Code左下角的配置按鈕(或者檔案>首選項>配置，Windows環境)，開啟使用者設定視窗，在搜尋框內輸入“experimentalDecorators”，找到選項，如下：

"javascript.implicitProjectConfig.experimentalDecorators": false
//改成true就可以了

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。