react状态异步操作redux-thunk

接着上一篇redux的基本使用，我们接着实现状态管理的异步操作，毕竟实际开发中接口获取的动态数据占大多数。
首先我们来进行安装

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

顺便安装了一个redux的日志输出框架，前面讲过一篇基于node的日志框架。大家感兴趣的可以去看看。

基于上一篇的代码结构，我们这次稍微做一些重构，让代码层次更清晰一些。
首先在src/store文件夹下面建一个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

以上便重构完成，下面开始异步操作
在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>
                //增加一个从开始登陆->登录中->登录成功的按钮
                <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 用来执行中间键
import logger from "redux-logger"
import thunk from "redux-thunk"
import {loginReducer} from "./login-redux"
const store = createStore(loginReducer, applyMiddleware(logger, thunk));//注意参数写入顺序，先执行logger再执行thunk
export default store;

启动项目

3.gif

操作多个redux模块

接下来我们来看看如果有多个reducer的情况，我们在store目录下创建一个count-redux.js文件实现一个简单地加一减一的实例。

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 用来合并多个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({
   //分别给每个模块取一个别名
    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
//取值时有了变化要加上刚才取的别名
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

启动项目

1.gif