关于 redux 的笔记(1)

最近在看 Dan 的课程。以下是笔记:

无论 app 有多简单或多复杂,都用一个 JavaScript object 来表示整个 app 的 state 。所有对 app 的操作都是 explicit 的(显性的),所以这些操作可以被追踪、记录。

redux 福音第一条:app 里所有的改变,包括 data 和 UI state,都被放在一个 object 里。这被称作 state 或 state tree 。

redux 福音第二条:state tree 是 read only 的(只读的),不能直接修改或写入。当你想改变 state 时,你需要 dispatch(派发)一个 action 。 action 是用来描述你想做出的改变的 plain JavaScript object 。可以这样理解:state 是对 app 的 data 的最精简的描述,action 是对 data 做出的改变的最精简的描述。

关于 action 这个 object 的结构,唯一的要求是要有 type 这个 property 且 value 不为 undefined ,通常 value 是 string 。例如 { type: “BOOM” } 。其它的 property 可以按需求来定。比如有三个💣,就可以用 { index: 1, type: “BOOM”} 指明引爆第二个。

pure function 的输出只取决于输入。pure function 没有 network or database calls (我把这儿理解为 调用接口 或 对数据库进行操作)之类的副作用。pure function 只是计算出新的值,相同的输入一定会得到相同的输出。

function square(x) {
  return x * x;
}

而且,pure function 不会对传入的值进行修改。如下例中,使用 map 这个 method 做出来一个新的 array ,对 items 没有任何改动。

function squareAll(items) {
  return items.map(square);
}

相反的,impure function 可能有 network or database calls ,可能有副作用,可能对 DOM 进行操作, 可能对传入的值进行修改。例如:

function square(x) {
updateXInDatabase(x);
return x * x;
}
function squareAll(items) {
for (let i = 0; i < items.length; i++) {
items[i] = square(items[i]);
}
}

以后会遇到必须写 pure function 的情况。

UI ,或者说 view layer(view 层),是最容易预测的。我们用一个代表 app 的 state 的 pure function 来描述 UI 。

你的 app 的 state 的改变,需要用一个 pure function 来描述。输入是 previous state(改变前的 state )和 action being dispatched(被派发的 action ),输出你的 app 的 next state(改变后的 state )。在任何一个 redux app 里,都有一个特殊的 function ,输入是整个 app 的 state 和被派发的 action ,输出你的 app 的 next state 。注意,作为输入的 previous state 没有任何改动,还记得 pure function 的定义吗?没错。所以输出的 next state 是一个新的 object

即使在大的 app 里,也仅仅只有这样一个 function ,基于整个 app 的 previous state 和被派发的 action 计算出 next state 。由于从 previous state 变成 next state 只需要改变有变化的部分,所以 redux 很快。

redux 福音第三条,也是最后一条:为了描述 state 的变化,你需要一个 function ,以 app 的 previous state 和被派发的 action 作为输入,输出 next state 。这个 function 必须是 pure function 。这个 function 被我们称作 reducer 。

Like what you read? Give ding fan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.