摘要：中定義來各個(gè)要做的事情。代碼定義把封裝成一個(gè)方法，這樣用的時(shí)候不用每次定義，避免出錯(cuò)入口文件封裝成方法，方便下面的的訂閱調(diào)用每當(dāng)時(shí)，訂閱的函數(shù)就會(huì)執(zhí)行現(xiàn)在有機(jī)關(guān)槍把。通過的來觸發(fā)，中訂閱的事件就會(huì)執(zhí)行。觸發(fā)，獲取的值。

為了方便，這里使用create-react-app搭建react環(huán)境

create-react-app mydemo

如果需要自定義react的配置，需要運(yùn)行下面的命令把配置文件彈出來。

npm run eject

npm i redux --save

redux簡(jiǎn)單用法就是通過它的store來訂閱和發(fā)布信息。
通過subscribe來訂閱action，通過dispatch來觸發(fā)action。reducer中定義來各個(gè)action要做的事情。

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,把a(bǔ)ction封裝成一個(gè)方法，這樣用的時(shí)候不用每次定義，避免出錯(cuò)
export function addCreator() {
    return { type: Add };
}
export function removeCreator() {
    return { type: Remove };
}

export function addAsync() {
    return (dispatch, getState) => {
        setTimeout(function () {
            dispatch(addCreator());
        }, 1000);
    }
}

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(
        ,
        document.getElementById("root")
    );
}
//封裝成方法，方便下面的store的訂閱調(diào)用
render();
//每當(dāng)dispatch時(shí)，訂閱的函數(shù)就會(huì)執(zhí)行
store.subscribe(render);

registerServiceWorker();

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    var store=this.props.store;
    var num=store.getState();
    return (
      

        
現(xiàn)在有機(jī)關(guān)槍{this.props.num}把。
         { store.dispatch(this.props.addCreator()) }}>add
         { store.dispatch(this.props.removeCreator()) }}>remove
      
    );
  }
}

export default App;

通過store的dispatch來觸發(fā)action，index.js中訂閱的事件就會(huì)執(zhí)行。

redux中如果需要執(zhí)行異步操作，需要安裝react-thunk插件

npm i react-thunk --save

同時(shí)需要redux插件的applyMiddleware

設(shè)置其實(shí)很簡(jiǎn)單，創(chuàng)建store時(shí)，把thunk傳遞給它就行了。

import thunk from "redux-thunk";

const store = createStore(reducer, applyMiddleware(thunk));

在app.js中增加一個(gè)觸發(fā)異步操作的按鈕，reducer中已經(jīng)定義了一個(gè)異步的方法。

export function addAsync() {
    return (dispatch, getState) => {
        setTimeout(function () {
            dispatch(addCreator());
        }, 1000);
    }
}

異步調(diào)用方法會(huì)返回一個(gè)有兩個(gè)參數(shù)的方法，兩個(gè)參數(shù)都是函數(shù)，第一個(gè)是dispatch函數(shù)，第二個(gè)是getState函數(shù)。
dispatch觸發(fā)action，getState獲取state的值。

在app.js中增加代碼

 { store.dispatch(this.props.addAsync()) }}>addAsync