2018/06/20 ～ 2018/06/22 ：Redux学习笔记

[Lxylona]

这两天在学 Redux 和 React-Redux ，Redux挺好理解的，比较让我费神的就是 React-Redux 了， 我花了好久才弄懂怎么把 React 和 Redux 结合起来 (╯｀皿′)╯ ┻━┻

1. Redux

我看了 Dan Abramov 的入门视频 Getting Started with Redux，作者一开始就展示怎么实现一个很简陋的 Redux，因为后面接受 store, action, reducer等概念就很轻松。

然后看官方文档，看到了 Async Actions 这里，说实话我从开始学就一直很想知道别人是怎么处理异步请求的，因为我自己总做的不太好。不过也没有很神奇，因为跟我自己猜测的差不多，拿三个变量来记录异步请求的状态。不过为什么别人能把代码写的那么优美简洁呢？ (╯°□°）╯ ┻━┻

除了这两个我还看了一篇介绍关于什么时候应该使用Redux的文章：
The Case for Flux 但我看不太懂……作者举了几个场景，我一个都没有脑补出来，不过实践出真知嘛，等我以后用到了我就明白了。

2. React-Redux

对我来说比较难的是connect，看官方文档我接受不太来，因为我不知道connect到底做了什么，而且例子中的 Presentational and Container Components虽然说可以理解，但是我觉得自己来写代码可能会晕掉，说到底还是没有理解connect到底是怎么将React和Redux连接起来的。于是我就去翻了一篇介绍connect源码的文章，我只粗略看了，细节的东西都被我忽略了哈哈。

connect返回一个高阶组件，该高阶组件有一个函数handleChange，该函数调用了this.setState()来触发组件更新。在组件挂载的时候，函数handleChange订阅了传入的store，因此在修改store的时候会执行该函数进而更新组件。不过Redux加入了很多判断组件会否需要更新的逻辑。

我之前不大能理解 React-Redux 怎么管理数据的，现在大概懂了：Redux 把组件中的 state都抽出去了，组成一个 state 树，修改组件的状态并不是修改自身的state，而是修改state树中对应该组件的那一部分，相当于把所有的信息都放在一个单一的信息源中。这种情况下我们不用用到this.setState()来更新state，this.setState()的唯一作用就只是迫使组件重新渲染而已。

于是更新的路径为：dispatch() --> handleChange --> setState() --> render()

最后是关于为什么要用Redux？因为没有接触过大型项目，因此看了也是似懂非懂，所以就先收藏两个回答：

理解 React，但不理解 Redux，该如何通俗易懂的理解 Redux？ - Wang Namelos的回答 - 知乎
说到了状态管理，扩展性。

如何评价数据流管理架构 Redux? - 杨森的回答 - 知乎
主要在说可预测性，不过我现在并不能生动形象的体会到可预测性可以带来多大的好处。

2018/06/23更新
今天又打开了被我尘封已久的Selector，然后看到了异步加载数据那里，我在异步加载完数据之后，在componentWillReceiveProps中调用返回的新数据，我觉得这种做法真的挺难debug的。如果是Redux中，这种异步的状态就容易控制得多了。

3. 纪念几个小小的bug

1. Redux状态的初始化

昨天尝试自己写个combineReducer：

function testCombine (reducers) {
    return (state, action) => {
        let newState = {};
        Object.keys(reducers).map((key, index) => {
            newState[key] = reducers[key](state[key], action)
        })
        return newState;
    }
}

但是居然报错了: Cannot read property 'visibilityFilter' of undefined。 但是自己感觉完全没毛病啊！
去查了一下文档，发现Redux会用一个undefined的state来进行初始化。

Redux will call our reducer with an undefined state for the first time.

于是给参数state加上一个默认值：

function testCombine (reducers) {
    // state有了默认值
    return (state = {}, action) => {
         // ...
    }
}

真的好了 >.<

2. componentWillReceiveProps

这个是好几天前在写Selector的时候遇到的，异步请求数据之后更新props.dataSource，但是Selector并没有刷新。调试了好久来着 __(°:з」∠) __

有一次突发奇想，在Selector中加了componentWillReceiveProps周期函数，真的的的的的的的的就好了！

原来渲染用了state中的数据，props改变了，state并没有变化，因此需要在componentWillReceiveProps中更新state，否则不会重新渲染。

所以说纸上谈兵都是耍流氓，想真的理解还是要多实践呀！