redux入门 互动版

异步action

这一小节我们将进一步了解action

1、一个简单的场景

假如我们有一个任务需要我们在五秒之后再提醒(加入todos)我们要怎么处理呢?

2、简单的尝试

大家很容易会想到这样

function asyncAddTodo(text){
    setTimeout(function(){
        return {
            type:ADD_TODO,
            text
        }
    },5000);
}

接着我们尝试打印出我们通过asyncAddTodo函数制造出来的action

console.log(asyncAddTodo('test'));

我们会发现什么?打印出来的是undefined,明显这样并不能达到我们预期的结果

3、我们该怎样达到异步呢?

仔细想想大家应该能想到这样:
我们异步使用dispath。

function asyncActionCreator(text){
    return function(dispatch){
        setTimeout(function(){
            dispatch(addTodo(text));
        },5000);
    }
}

很好,我们离异步action又近了一步。可是问题又来了,我们的reducer可不认识function。

在右边代码区完成异步代码