redux中action的异步更新state踩坑1

reducer的异步更新state引发的问题以及处理方案

有些需求比如：我们想在接口请求完成后立即获取state的状态，然后去做路由跳转等等操作，但是redux中action操作的state都是异步的，怎么办呢？下面我们看一个例子

在组件中我们想点击后立即获取到state状态然后再跳转：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import loginAction from '@redux/actions/login'

class Login extends Component {
    constructor(props) {
        super(props)
    }
    render () {
        return (
            <div>
                我是登录页面
                {this.props.list.map((item, index) => {
                    return (
                        <div key = {index}>
                            {item}
                        </div>
                    )
                })}
                <button onClick = {() => {
                
                	// 在这里点击之后根据state状态立即条状，state异步怎么处理呢？
                	
                	// 答案是使用promise的then方法，但是需要在redux的action中进行一些小改动，请继续往下看
                	
                    this.props.loginOut().then( () => {
                        this.props.history.push('/out')
                    })
                }}>登出</button>
            </div>
        )
    }
}

export default connect((state) => ({
    list: state.login.list
}), (dispatch) => ({
    loginOut: bindActionCreators(loginAction.loginSuccess, dispatch)
}))(Login)

---

在actions中方法中返回Promise即可：

export default {
    loginSuccess (dispatch) {
        return dispatch => {
            dispatch({
                type: 'login',
                payload: {
                    list: [4 ,5, 6]
                }
            })
            return Promise.resolve()
        }
    }
}

注意：
actions允许返回dispatch函数是需要引入thunk中间件的

import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducers'
import thunk from 'redux-thunk'

let store = createStore(rootReducer, applyMiddleware(thunk))

export default store

以上是深夜回顾（当前时间晚上11:57），如果对读者有帮助的话不妨给个赞！