接着上一篇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}>去登陆=>登录中</button><br/><br/>
<button onClick={haslogin}>登录中=>登陆成功</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}>登录=>登陆成功</button><br/><br/>
<button onClick={nowlogin}>去登陆=>登录中</button><br/><br/>
<button onClick={haslogin}>登录中=>登陆成功</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}>登录=>登陆成功</button><br/><br/>
<button onClick={nowlogin}>去登陆=>登录中</button><br/><br/>
<button onClick={haslogin}>登录中=>登陆成功</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
