2017-05-04 38 views
6

我不明白需要像redux-thunk之类的东西。从我所了解的thunk是一个返回函数的函数。包装的表达式和中间件的使用对我来说似乎更多地混淆了正在发生的事情。从redux-thunk的示例代码为什么使用redux-thunk?

import thunk from 'redux-thunk'; 

// Note: this API requires [email protected]>=3.1.0 
const store = createStore(
    rootReducer, 
    applyMiddleware(thunk) 
); 


// Meet thunks. 
// A thunk is a function t hat returns a function. 
// This is a thunk. 

function makeASandwichWithSecretSauce(forPerson) { 

    // Invert control! 
    // Return a function that accepts `dispatch` so we can dispatch later. 
    // Thunk middleware knows how to turn thunk async actions into actions. 

    return function (dispatch) { 
    return fetchSecretSauce().then(
     sauce => dispatch(makeASandwich(forPerson, sauce)), 
     error => dispatch(apologize('The Sandwich Shop', forPerson, error)) 
    ); 
    }; 
} 

// Thunk middleware lets me dispatch thunk async actions 
// as if they were actions! 

store.dispatch(
    makeASandwichWithSecretSauce('Me') 
); 

上面的代码可以更简洁的书面和直观的措施:

fetchSecretSauce().then(
    sauce => store.dispatch(makeASandwich('Me', sauce)), 
    error => store.dispatch(apologize('The Sandwich Shop', forPerson, error)) 
) 

我的问题是什么需要的是redux-react实现,它是如何在类似的现有解决方案提高到上面的例子。

+2

说你需要做的API调用,您可以编写一个解决或拒绝承诺的thunk,并相应地调度SUCCESS或FAIL动作,并且从组件内部执行所有需要做的事情就是loadMyThunk() - 所有调度的动作都被抽象为thunk。我有一个lib'redux-entity',它使用了这样的模式:https://github.com/mikechabot/redux-entity/blob/master/src/thunk.js – lux

回答

7

Redux Thunk教Redux识别事实上功能的特殊行为。

当动作创建者返回一个函数时,该函数将由Redux Thunk中间件执行。这个功能不需要是纯粹的;它因此被允许有副作用,包括执行异步API调用。该功能还可以分派操作。

该thunk可用于延迟动作的分派,或仅在满足特定条件时才分派。

如果启用了Redux Thunk中间件,则只要尝试分派函数而不是操作对象,中间件就会使用dispatch方法本身作为第一个参数调用该函数。

然后,因为我们“教导”Redux认识到这些“特殊”动作创作者(我们称之为thunk动作创作者),现在我们可以在任何我们使用常规动作创作者的地方使用它们。

检查从丹·阿布拉莫夫自己这个伟大的答案,它涵盖了一切:https://stackoverflow.com/a/35415559/5714933

还要检查这些链接,了解更多信息:

https://github.com/gaearon/redux-thunk#motivation http://redux.js.org/docs/advanced/AsyncActions.html

+2

谢谢Mohamed。我很欣赏这里的努力。问题是我已经读过丹·阿布拉莫夫的帖子,但仍然不满意。阅读所有这些材料后,我会得到这个thunk可以用来延迟一个动作的发送,但是你可以很容易地做到这一点,而不会像我在上面的示例中显示的那样。我发现的其他原因是您可以基于传递的getState有条件地派发,但是您也可以在没有Thunk的情况下完成此任务,并且不需要添加中间件库和另一个依赖关系层即可学习。我看不出它对大型应用程序有何帮助。 – micahblu