首頁 > web前端 > js教程 > 主體

如何使用react-redux插件

php中世界最好的语言
發布: 2018-06-02 15:52:32
原創
1414 人瀏覽過

這次帶給大家如何使用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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板