接著上一篇redux的基本使用摆舟，我們接著實現(xiàn)狀態(tài)管理的異步操作，畢竟實際開發(fā)中接口獲取的動態(tài)數(shù)據(jù)占大多數(shù)。
首先我們來進行安裝
npm install redux-thunk redux-logger -S 或
cnpm install redux-thunk redux-logger -S 或
yarn add redux-thunk redux-logger -S 或
順便安裝了一個redux的日志輸出框架恨诱，前面講過一篇基于node的日志框架媳瞪。大家感興趣的可以去看看。
基于上一篇的代碼結(jié)構(gòu)照宝，我們這次稍微做一些重構(gòu)蛇受，讓代碼層次更清晰一些。
首先在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
以上便重構(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>
//增加一個從開始登陸->登錄中->登錄成功的按鈕
<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 用來執(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;
啟動項目
3.gif
操作多個redux模塊
接下來我們來看看如果有多個reducer的情況熊响，我們在store目錄下創(chuàng)建一個count-redux.js文件實現(xiàn)一個簡單地加一減一的實例旨别。
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
