Redux-thunk 使用出问题 做延迟更新store 刚入坑 求指点

#1

index.js代码


import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import Test from './component/Test'
import {Test2} from './component/Test'
import { counter,addNum,removeNum,addNumAsyns } from './component/index.redux'
const reduxDevtools = window.devToolsExtension?window.devToolsExtension():()=>{}
//import './index.css';
//import * as serviceWorker from './serviceWorker';
const store = createStore(counter, compose(
    applyMiddleware(thunk),
    reduxDevtools
))
function render(){
    //把App标签渲染到html的id为root下面
    ReactDOM.render(
    <div className="App">
        <Test store={store} addNum={addNum} removeNum={removeNum} addNumAsyns={addNumAsyns} name='yyt'></Test>
        <Test2 store={store}></Test2>
    </div>, document.getElementById('root'));
}
render()
store.subscribe(()=>{
    render()
    console.log(store.getState)
})
//serviceWorker.unregister();

Test.js代码 内部含有Test , Test2两个模块


import React from "react"
import {Button,  List } from 'antd'
import theme from '../json/theme.json'

class Test2 extends React.Component{
    render(){
        let store = this.props.store
        const num = store.getState()
        return <h1>{num}</h1>
    }
}

class Test extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            solders:[]
        }
    };
    componentWillMount(){
        console.log('组件将要加载...')
    }
    componentDidMount(){
        console.log('组件加载完毕...'+this.props.name)
    }
    shouldComponentUpdate(){
        return true;
    }
    addPerson = () => {
        //console.log(this.props.store)
        
        //console.log(this.props.store.getState())
        let arr = [...this.state.solders,'新人'+Math.random()];
        this.setState({
            solders:arr
        })
        console.log("进入了addPerson函数, 且dispatch参数为 : "+ JSON.stringify({...this.props.addNum(),length:arr.length}))
        this.props.store.dispatch({...this.props.addNum(),length:arr.length})
    }
    addNumAsyns = () => {
        let arr = [...this.state.solders,'新人'+Math.random()];
        this.setState({
            solders:arr
        })
        this.props.addNumAsyns({length:arr.length})
    }
    removePreson = () => {
        this.state.solders.pop();
        console.log("进入了removePreson函数, 且dispatch参数为 : "+ JSON.stringify({...this.props.removeNum(),length:this.state.solders.length}))
        this.props.store.dispatch({...this.props.removeNum(),length:this.state.solders.length})
    }
    render(){
        console.log('组件正在加载...')
        return(
            <div>
                <div>这是一个测试,{this.props.name}</div>
                <Button onClick={this.addPerson} type="primary">新增</Button>
                <Button onClick={this.removePreson} type="primary">删除</Button>
                <Button onClick={this.addNumAsyns} type="primary">延迟新增</Button>
                <List bordered size='small'>
                    {this.state.solders.map(v=>{
                        return (
                            <List.Item key={v}><span style={{color:theme.bright.fontColor}}>{v}</span></List.Item>
                        )
                    })}

                </List>
            </div>
        )
    }
}
export default Test;
export {Test2}

index.redux.js


const ADD_NUM = '加一'
const REMOVE_NUM = '减一'


//reducer
export function counter(state=0, action){
    switch(action.type){
        case ADD_NUM:
            return action.length
        case REMOVE_NUM:
            return action.length
        default:
            return 0
    }
}

//创建action
export function addNum(){
    return {type:ADD_NUM}
}
//创建action
export function removeNum(){
    return {type:REMOVE_NUM}
}

export function addNumAsyns(state=10){
    console.log("进入了addNumAsyns")
    console.log("addNumAsyns里dispatch参数为 : "+ JSON.stringify({...addNum(),length:state}))
    // return dispatch=>{
    //     console.log("lllkdafjhvfshdjss")
    //     setTimeout(()=>{
    //         console.log("jjjjjjj");
    //         return dispatch({...addNum(),length:state.length})
    //     },200);
    // }
    return (dispatch, getState)=>{
        console.log("dsgterfv")
        setTimeout(()=>{
console.log("进入延迟器")
            dispatch({...addNum(),length:state})
        },2000)
    }
}

问题是点击新增和删除按钮都是可以成功的把数组的长度赋值给store的,但是点击延迟新增按钮 虽然它成功的跑进了addNumAsyns 但是并没有执行return的函数

#2

传张静态图片方便查看