最近工作接手的前端项目技术栈是 React + Redux,跟着 文档 一起熟悉了下,大概形成了一点手感。
redux 将 UI 的状态(state)储存在 store 中,全局只有一个唯一的 state。state 的更新的大致流程是,通过 action creator 产生一个 action 对象,然后 dispatch 这一个 action,交给 reducer 处理。reducer 根据当前的 state 与触发的 action 对象,返回一个新的 state 对象替换掉原来的 state。
这一系列操作都是同步的,当涉及到异步的操作的情况下,可以用 redux-thunk 注入到 redux 的 store 中。这时候 action creator 可以返回一个匿名函数,函数里调用异步的过程。将这个返回函数 dispatch 出去以后,这个函数被 redux-thunk 拦截并执行。待函数内部异步过程有了结果,再 dispatch 一个 action ,走一遍 reducer 去更新 state。
一波走下来,感觉这个 thunk
的命名有点意思,在 js 层面,叫 redux-thunk
而不是叫 redux-callback
,让人开始去探索那些背后的渊源~
引用一下 redux-thunk 的 README 的介绍:
A thunk is a function that wraps an expression to delay its evaluation.
// calculation of 1 + 2 is immediate
// x === 3
let x = 1 + 2;
// calculation of 1 + 2 is delayed
// foo can be called later to perform the calculation
// foo is a thunk!
let foo = () => 1 + 2;
The term originated as a humorous past-tense version of "think".
参考: