再看reducers

Time: 2019-08-20

首先，整个State树是存储在单个对象中，这会带来一个问题是：模块化的程度不够。

Redux是通过函数来模块化，函数用于更新部分State树。这类函数称之为Reducer。

Reducer接收当前的State和Action作为参数，通过这些参数创建并返回新的State。

Reducer用于更新State树的特定部分。

因此，我们需要知道，传入的State和Action后，Reducer是如何定位到特定的部分，更新State树的呢？

Demo

先定一个State树，然后定义多个Reducer来各自更新特定的部分：

{
  colors: [
  {
      "id": "865c1d0",
       "title": "Ocean Blue",
        "color": "#0070ff",
        "rating": 3,
        "timestamp": "Sat Mar 12 2016 16:12:09 GMT-0800 (PST)"
    }, 
  {
      "id": "f95c1d0",
       "title": "Tomato",
        "color": "#d10012",
        "rating": 2,
        "timestamp": "Fri Mar 12 2016 16:12:09 GMT-0800 (PST)"
    }, 
  ],
  sort: "SORTED_BY_DATE"
}

然后基于这个State树就可以构建对应的Reducer函数：

export const color = (state = {}, action) => {
  return {}
}

export const colors = (state = [], action) => {
  return []
}

export const sort = (state = "SORTED_BY_DATE", action) => {
  return ""
}

从这些Reducer的定义来看，每个函数希望接收的state参数是不同的，并不是接收整个state树，而是聚焦于特定的部分。

• color这个Reducer希望接收的是{}，表示对象，返回的也是对象。
• colors这个Reducers希望接收的是[]，表示数组，返回的也是数组。
• sort这个Reducer希望接收的是字符串，返回的也是字符串。

这样的话，每个函数的返回值和初始state都与它们在State树中的定义数据类型对应。

再次强调，每个Reducer都只用于处理State树上Action更新的部分。

Q: redux reducer如何定位state在State树上的位置？

A:非常重要但是书上和博客上不提及的是，能够聚焦的前提是reducer的名字必须和state的属性同名！

这样就非常好理解了，也能在Reducer函数中传参的位置，定义好state的形状了，数组也好，对象也好，字符串也罢，就可以做到聚焦了。

参考

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html