V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
FrankFang128
V2EX  ›  分享创造

面试官叫我手写 redux-thunk

  •  
  •   FrankFang128 · 2021-03-24 21:07:58 +08:00 · 1107 次点击
    这是一个创建于 1100 天前的主题,其中的信息可能已经有所发展或是发生改变。

    学生:方,今天我面试又挂了。

    方:怎么?没答上来?

    学生:面试官先是问 Redux,我按照你的押题答上来了。但是他又补了一句,你知道 redux-thunk 吗?它有什么用

    方:你怎么说?

    学生:我说,知道,它可以利用 redux 中间件让 redux 支持异步的 action

    方:没错呀

    学生:然后他问,你能手写 redux-thunk 的源码吗?

    方:你不会写吗?

    学生:我没看过啊……

    方:这个需要看吗,你知道 redux 的原理之后,写个 thunk 就是几秒钟的事情

    学生:啊?这么简单?

    方:不信啊,我把 redux-thunk 的源码给你看看:

    一共 14 行,我还能跟你再简化成 7 行:

    const thunk = ({ dispatch, getState }) => (next) => (action) => {
      if (typeof action === 'function') {
        return action(dispatch, getState);
      }
    
      return next(action);
    };
    export default thunk
    

    用中文描述一下这段代码的逻辑:

    1. 如果 action 是个函数,就调用这个函数
    2. 如果 action 不是函数,就传给下一个中间件

    再简化一点就是:发现 action 是函数就调用它。

    学生:就这点代码就能让 Redux 支持异步 action 啊

    方:能是能,我们先看看如果没有 redux-thunk 怎么搞出异步 action,有两种办法,一种是先创建「请求数据」的 action,然后再创建一个「更新数据」的 action:

    还有一种办法是直接发请求,得到数据之后创建「更新数据」的 action 。

    学生:那有了 redux-thunk 之后呢?

    方:有了 redux-thun,action 就可以是函数了:

    const action = function(dispatch) {
      return fetchUsers().then(
        (users) => dispatch({type:'updateUsers', payload: users}),
        (error) => dispatch({type:'updateUsersError'}),
      );
    };
    dispatch(action)
    

    这个 action 会被调用,然后在将来某个时候创建 updateUsers action,所以我们可以称它为异步 action (其实就是函数)

    学生:颇有脱裤子放屁的感觉,这跟我自己调用这个函数有区别吗?

    方:完全没有区别,redux-thunk 就是帮你调用这个函数,确实是脱裤子放屁。

    学生:面试官居然问这种代码

    方:其实他可能是想考察你有没有好好了解 Redux 相关的生态,说不定他还在等你答完这道题之后问你能不能手写 redux-saga 呢

    学生:好家伙,那是什么东西

    方:下次聊吧,这次让你理解 redux-thunk 就行了。

    学生:确实理解了,谢谢。

    完。 姊妹篇:面试官叫我手写 Redux

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2859 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 11:43 · PVG 19:43 · LAX 04:43 · JFK 07:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.