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