本篇文章主要介紹了react redux入門示例，現在分享給大家，也給大家做個參考。如有不足之處，歡迎批評指正。

環境準備
為了方便，這裡使用create-react-app搭建react環境

create-react-app mydemo  

彈出配置

如果需要自定義react的配置，需要執行下面的命令把配置檔案彈出來。

npm run eject  

安裝redux

npm i redux --save  

簡單理解

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 (  
<div 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>  
</div >  
);  
}  
}  
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>  

結語

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

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