接著上一篇redux的基本使用，我們接著實(shí)現(xiàn)狀態(tài)管理的異步操作，畢竟實(shí)際開發(fā)中接口獲取的動(dòng)態(tài)數(shù)據(jù)占大多數(shù)。
首先我們來進(jìn)行安裝

npm install redux-thunk redux-logger -S 或
cnpm install redux-thunk redux-logger -S 或
yarn add redux-thunk redux-logger -S 或

順便安裝了一個(gè)redux的日志輸出框架，前面講過一篇基于node的日志框架。大家感興趣的可以去看看。

基于上一篇的代碼結(jié)構(gòu)，我們這次稍微做一些重構(gòu)，讓代碼層次更清晰一些。
首先在src/store文件夾下面建一個(gè)login-redux.js文件，放入如下代碼

login-redux.js

export const loginReducer = (state="登錄", action) => {
    switch(action.type){
        case "nologin":
            return "登錄"
        case "nowlogin":
            return "登錄中...."
        case "haslogin":
            return "已登錄"
        case "logout" :
            return "退出登錄"
        default :
            return state
    }
}
//action creator
export const nowlogin = () =>({type: "nowlogin"})
export const haslogin = () =>({type: "haslogin"})
export const logout = () =>({type: "logout"})

store/index.js

import { createStore, applyMiddleware } from "redux"
import {loginReducer} from "./login-redux"
const store = createStore(loginReducer)
export default store;

src/reduxdeom.js

import React from "react"
import { connect } from "react-redux"
import { nowlogin, haslogin, logout } from "./store/login-redux"
const mapStateToProps = state => ({status: state});
const mapDispatchToProps = {nowlogin, haslogin, logout, asyncLogin}
@connect(mapStateToProps, mapDispatchToProps)
class Reduxdemo extends React.Component{
    render(){
        const { status, nowlogin, haslogin, logout } = this.props;
        return (
            <div>
                <p>用react-redux改造后</p>
                <p>{status}</p>
                <button onClick={nowlogin}>去登陸=&gt;登錄中</button><br/><br/>
                <button onClick={haslogin}>登錄中=&gt;登陸成功</button><br/><br/>
                <button onClick={logout}>退出</button>
            </div>
        )
    }
}
export default Reduxdemo

以上便重構(gòu)完成，下面開始異步操作
在src/store/login-redux.js中添加如下代碼

export const asyncLogin  = () => dispatch =>{
    dispatch({type: "nowlogin"});
    setTimeout(() => {dispatch({type: "haslogin"})}, 1500)
}

src/reduxdeom.js

import React from "react"
import { connect } from "react-redux"
import { nowlogin, haslogin, logout, asyncLogin } from "./store/login-redux"
const mapStateToProps = state => ({status: state});
const mapDispatchToProps = {nowlogin, haslogin, logout, asyncLogin}

@connect(mapStateToProps, mapDispatchToProps)
class Reduxdemo extends React.Component{
    render(){
        const { status, nowlogin, haslogin, logout, asyncLogin } = this.props;
        return (
            <div>
                <p>用react-redux改造后</p>
                <p>{status}</p>
                //增加一個(gè)從開始登陸->登錄中->登錄成功的按鈕
                <button onClick={asyncLogin}>登錄=&gt;登陸成功</button><br/><br/>
                <button onClick={nowlogin}>去登陸=&gt;登錄中</button><br/><br/>
                <button onClick={haslogin}>登錄中=&gt;登陸成功</button><br/><br/>
                <button onClick={logout}>退出</button>
            </div>
        )
    }
}
export default Reduxdemo

src/index.js

import { createStore, applyMiddleware } from "redux" //applyMiddleware 用來執(zhí)行中間鍵
import logger from "redux-logger"
import thunk from "redux-thunk"
import {loginReducer} from "./login-redux"
const store = createStore(loginReducer, applyMiddleware(logger, thunk));//注意參數(shù)寫入順序，先執(zhí)行l(wèi)ogger再執(zhí)行thunk
export default store;

啟動(dòng)項(xiàng)目

3.gif

操作多個(gè)redux模塊

接下來我們來看看如果有多個(gè)reducer的情況，我們在store目錄下創(chuàng)建一個(gè)count-redux.js文件實(shí)現(xiàn)一個(gè)簡單地加一減一的實(shí)例。

src/store/count-redux.js

export function countRedux(state=0, action){
    switch(action.type){
        case "add":
            return state + 1
        case "minus":
            return state - 1 
        default: 
        return  state
    }
}

export const add = () => ({type: "add"})
export const minus = () => ({type: "minus"})

src/store/index.js中引入

import { createStore, applyMiddleware, combineReducers } from "redux"  //combineReducers 用來合并多個(gè)reducer模塊
import logger from "redux-logger"
import thunk from "redux-thunk"
import {loginReducer} from "./login-redux"
import {countRedux} from "./count-redux"

const store = createStore(combineReducers({
   //分別給每個(gè)模塊取一個(gè)別名
    count: countRedux,
    login: loginReducer
}), applyMiddleware(logger, thunk))

export default store;

src/reduxdemo.js增加加一減一功能

import React from "react"
import { connect } from "react-redux"
import { nowlogin, haslogin, logout, asyncLogin } from "./store/login-redux"
import { add, minus } from "./store/count-redux"  //引入action
//取值時(shí)有了變化要加上剛才取的別名
const mapStateToProps = state => ({status: state.login, num: state.count});
const mapDispatchToProps = {nowlogin, haslogin, logout, asyncLogin, add, minus}

@connect(mapStateToProps, mapDispatchToProps)
class Reduxdemo extends React.Component{
    render(){
        const { status, nowlogin, haslogin, logout, asyncLogin, add, minus, num } = this.props;
        return (
            <div>
                <div>
                    <p>用react-redux改造后</p>
                    <p>{status}</p>
                    <button onClick={asyncLogin}>登錄=&gt;登陸成功</button><br/><br/>
                    <button onClick={nowlogin}>去登陸=&gt;登錄中</button><br/><br/>
                    <button onClick={haslogin}>登錄中=&gt;登陸成功</button><br/><br/>
                    <button onClick={logout}>退出</button>
                </div>
                <div>
                    <p>{num}</p>
                    <button onClick={add}>加一</button>
                    <button onClick={minus}>減一</button>
                </div>
            </div>
        )
    }
}
export default Reduxdemo

啟動(dòng)項(xiàng)目

1.gif