這次帶給大家如何使用react redux，使用react redux的注意事項有哪些，下面就是實戰案例，一起來看一下。
環境準備
為了方便，這裡使用create-react-app來建立react環境
create-react-app mydemo
登入後複製
彈出設定
如果需要自訂react的配置，需要執行下面的指令把設定檔彈出來。
安裝redux
簡單理解
redux簡單用法就是透過它的store來訂閱和發布訊息。
透過subscribe來訂閱action，透過dispatch來觸發action。 reducer中定義來各個action要做的事情。
demo程式碼
reducer定義
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;
}
}
//action creator,把action封装成一个方法，这样用的时候不用每次定义，避免出错
export function addCreator() {
return { type: Add };
}
export function removeCreator() {
return { type: Remove };
}
export function addAsync() {
return (dispatch, getState) => {
setTimeout(function () {
dispatch(addCreator());
}, 1000);
}
}登入後複製
入口檔index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import thunk from 'redux-thunk';
import { reducer,addCreator,removeCreaator } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer);
function render() {
ReactDOM.render(
<App store={store} addCreator={addCreator} removeCreator={removeCreator} />,
document.getElementById('root')
);
}
//封装成方法，方便下面的store的订阅调用
render();
//每当dispatch时，订阅的函数就会执行
store.subscribe(render);
registerServiceWorker();登入後複製
App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
var store=this.props.store;
var num=store.getState();
return (
<p className="App">
<h1>现在有机关枪{this.props.num}把。</h1>
<button onClick={() => { store.dispatch(this.props.addCreator()) }}>add</button>
<button onClick={() => { store.dispatch(this.props.removeCreator()) }}>remove</button>
</p >
);
}
}
export default App;登入後複製
透過store的dispatch來觸發action，index.js中訂閱的事件就會執行。
redux的非同步執行
redux中如果需要執行非同步操作，需要安裝react-thunk外掛
npm i react-thunk --save
登入後複製
同時需要redux外掛程式的applyMiddleware
關鍵程式碼
設定其實很簡單，創建store時，把thunk傳遞給它就行了。
import thunk from 'redux-thunk';
const store = createStore(reducer, applyMiddleware(thunk));
登入後複製
在app.js中增加一個觸發非同步操作的按鈕，reducer中已經定義了一個非同步的方法。
export function addAsync() {
return (dispatch, getState) => {
setTimeout(function () {
dispatch(addCreator());
}, 1000);
}
}登入後複製
非同步呼叫方法會傳回一個有兩個參數的方法，兩個參數都是函數，第一個是dispatch函數，第二個是getState函數。
dispatch觸發action，getState取得state的值。
在app.js中增加程式碼
<button onClick={() => { store.dispatch(this.props.addAsync()) }}>addAsync</button>登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
怎麼使用Vue實作倒數按鈕
#怎麼利用Vue寫一個雙向資料綁定
以上是如何使用react redux的詳細內容。更多資訊請關注PHP中文網其他相關文章！
