如何使用react-redux插件

這次帶給大家如何使用react-redux插件，使用react-redux插件的注意事項有哪些，下面就是實戰案例，一起來看一下。

react-redux簡介

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 (
   <p 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>
   </p >
  );
 }
}
//定义把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;
  }
}
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"]
  ]
 }

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

//App.js
@connect((state) => ({ num: state }),{ addCreator, removeCreator, addAsync })
class App extends Component {
.....//省略
// function mapStateToProps(state) {
//  return { num: state }
// }
// App = connect(mapStateToProps, { addCreator, removeCreator, addAsync })(App);

VS Code 裝飾器提示「experimentalDecorators」的解決方案

點擊Visual Studio Code左下角的配置按鈕(或檔案>首選項>配置， Windows環境)，打開使用者設定窗口，在搜尋框內輸入“experimentalDecorators”，發現竟然能夠找到選項，如下：

"javascript.implicitProjectConfig.experimentalDecorators": false

改成true就可以了。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼使用Vue實作倒數按鈕

#怎麼利用Vue寫一個雙向資料綁定

以上是如何使用react-redux插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！