Redux的thunk使用问题

#1

学习redux的时候,redux-thunk还是不太理解,还有redux-promise-middleware,了解的不透彻,有好的文档教案可以参考么

#2

redux-thunk是允许你在写 action 的时候,返回一个有两个参数的函数,这两个参数分别是dispatch与getState;所以你有异步操作的时候,比如请求后台接口,你就可以这样写:

export function navigateAction(){
    return (dispatch,getState) => {
        //console.log(getState());
        getJson("/get").then(res => {
            dispatch({
                type:"NAVIGATE",
                payload:res
            })
        }).catch(err => {
            console.log(err);
        })
    }
}

可以很明显的看到,dispatch被怼进函数,然后直接用dispatch调用action即可!

#4

衷心地感谢您的热心回答:smirk:

#5

请问一下,redux-thunk这种中间件的意义是什么呀?明明可以在异步回调里直接Store.dispatch(action)发出一个action啊,为什么要搞个中间件封装一次呢?

#6

不是狠明白你的表达:
1、redux-thunk这种中间件的意义是什么呀?
答:redux-thunk是redux作者Dan为了处理redux异步而开发出来的插件,当然能处理redux异步的插件还有很多,比如有redux-saga、redux-promise等等一大堆。redux-thunk能广泛应用就是因为它的简单方便,且是redux官方文档里面提到的(王婆卖瓜嘛)。为什么要用这些处理redux异步的插件呢?因为redux是纯函数编写的,纯函数是处理不了异步问题,所以你想用redux去处理异步的话,(基本)必须是要用到这种插件。
2、明明可以在异步回调里直接Store.dispatch(action)发出一个action啊,为什么要搞个中间件封装一次呢?
答:我可以理解为你在actions.js文件里面 ,直接引入了 配置好的store。

import store from './configureStore';
// 然后在then或者catch里面
then(res => {
      store.dispatch(action(res))
})

嗯!如果你这样写代码的话,我想,应该…是可行的吧!虽然我没这么试过
当然我不希望你钻牛角尖,因为你只要引入redux-thunk的插件,然后在配置store的时候,配置进applyMiddleware一次就可以了,后续根本就不用再引入什么store,一劳永逸不是更好,而且redux-thunk才10行代码而已

import thunk from 'redux-thunk';
//创建store
const store = createStore(
    reducer,
    applyMiddleware(thunk) 
);
#7

十分感谢。你回答的第2点就是我认为的那个意思。。。我是刚学习redux,用的不深,刚开始看的有点晕,感觉会有其他因素影响,所以要引入中间件