Day14-Redux 篇-介绍 Redux

这篇主要会讲述 Redux 的一些介绍，下篇才会开始进行实作。

Redux 是什麽?

Redux 是专门管理 state 的函式库，它可以将整个专案的 state，储存在一个树状物件并放在唯一的 store 里面。

为何需要 Redux?

方便管理 state。没有使用 Redux 的话，我们要透过元件将 state 进行传递，如果有 Redux 就可以将 state 集中管理，有需要时再从 store 传递给元件。

另外透过 Redux 也可以将操作元件 state 的逻辑部分从元件抽离出来，达到元件做纯渲染，Redux 处理资料逻辑的结果。

特色

1. 不一定要和 React 一起使用，和 React 一起使用的话需要使用 react-redux 将两者衔接起来，透过 react-redux 可以将 store 内的 state 注入到元件内
2. Redux 架构围绕着严格的单向资料流。(可参考下图)
3. Redux 主要由 action、reducer、store 等三个部分构成，以下详细说明它们的作用&整个 redux 运作的过程图

图片截自 Udemy 线上课程 Modern React with Redux

action creator

当某个事件发生时，会建立一个 JS 物件，该物件即为 action。

action

action 里面有 type 和 payload 属性，一定要有 type 属性，payload 则非必要，分别描述了行为的类型和要传递的 state。

dispatch

将 action 传递到 reducer 函式。

reducer

reducer 是一个 pure function，它会取得先前的 state 和一个 action，并根据传入的 action 的 type 去将 state 值做改变，最後回传的是一个经过计算後新的 state 物件。

另外在一个专案中可以有多个 reducer，每一个都管理它所拥有的全域 state 一部分。

使用 reducer 有些限制:

1. 改变原本的 state
2. 执行有 side effect 的动作，像是呼叫 API 和 routing 转换
3. 呼叫不是 pure 的 function，像是 Date.now() 或是 Math.random()

store

reducer 回传後的 state 放在这边做管理，让由 react 或其他语言制成的应用程序可以取用。

在对 Redux 有初步的认识後，明天将会实作一个范例。