[ Day 23 ] Redux 中的核心概念

上一篇 Day 22 我们已经了解了何谓 Redux 以及该套件的三大原则，今天就要来为大家介绍在 Redux 这个套件中的核心概念及功能名词介绍。

主要的概念与功能

在 Redux 的官方文件当中有特别提到要开始使用前应该要了解的名词和概念，所以这边就帮大家把这些概念整理如下：

Actions

是一个带有 type 和 payload 两个属性的 JavaScript 物件且在其属性中会说明资料的改变内容为何？

这边补充说明一下，Actions 物件中的 type 属性通常会是字串并用来指定这个 Action 类型的名称，而 payload 属性则是用来做处理该 Action 物件被执行时需要添加或处理的资料内容（ payload 这个属性是非必要的，所以可以视需求加入即可）。

另外， type 属性的命名方式通常会使用 事件分类/事件名称 ，假设我们是做一个 ToDoList 的话可以这样命名 Action 中的 type 属性为： todos/todoAdded 当作该名称（这个命名方式不是硬性规定，不过官方建议大家可以这样做）。

/* 创建一个 Action 物件： addTodoAction */
const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

Reducers

一个接收目前的 state 和指定的 action 这两个参数的函式，并根据这两个参数返回一个全新的 State 值。

依据官方文件的说明，我们可以这样理解 Reducer 函式：

( 原本的 state, action 物件名称) => 新的 state

你也可以把 Reducer 想像成是一个监听（ Event Listener ）的物件，而且会根据函式内所指定的 action 类别来处理对应的事件。
另外，关於 Reducers 还有三个使用上必须遵守的原则：

1. 新的 State 值一定都是参考 state 和 action 这两个参数所产生出来的。
2. 透过 Reducer 所产生的新的 State 值并不是直接修改原本的 State ，而是复制一份本来的 State 值并修改或更新它。
3. 不能做会产生 Side Effects （像是：非同步资料处理或任何会产生非预测的值的行为）的处理，因为 Reducer 本身就是一个 Pure Function 。

下面给大家看一个官方的简易范例：

/* 宣告一个变数 initialState 并存放 State ： value 的初始值为 0 */
const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
/* 若此 action ： counter/increment 有被触发的话就执行 return 内的行为 */
  if (action.type === 'counter/incremented') {
    return {
      ...state,
      /* 并在这边更新复制的 State 值 +1 */
      value: state.value + 1
    }
  }
  return state
}

Store

在 Redux 套件中储存我们整个应用程序中的 State 的地方，而且整个应用程序中只会有一个 Store 物件。

我们会使用 Redux 套件中的 createStore 的方法来帮我们先建立一个全新的 Store 来存放 State 的值，再将我们需要存入此 Store 的内容（包含了 action 和 reducer 这两个物件）汇入到这个 Store 当中。

备注：通常我们会在专案内建立个别的目录来分别存放 action 、 reducer 和 store 等资料，这边会需要载入的就是在 reducer 资料夹所建立的一个 rootReducer 。

import { createStore } from 'redux';
import rootReducer from './rootReducer';

const store = createStore(
  rootReducer
);

Dispatch

在 Redux 中唯一可以修改 Store 内所储存到 State 值的方式就是将一个设定好的 Action 物件传入到此方法内。

/* 将一个 type: 'counter/incremented' 的 action 物件传入 dispatch 方法内 */
store.dispatch({ type: 'counter/incremented' })
/* 印出 store 内目前 state 最新被该 action 物件所修改过的值 */
console.log(store.getState())

关於 Redux 的功能还有它的核心概念就先为大家介绍到这了。我觉得 Redux 的章节真的比前面都要复杂一些，不单只是较多的功能和方法，最主要的原因是出在我并没有实际使用 Redux 做开发，所以这些理论跟功能实在是有吸收但不晓得有没有真的理解了哈哈。

所以下面这边我想给大家提供几篇前辈大大们的铁人文章，里面针对 Redux 的实际应用还有其他更进阶的功能介绍。我个人是希望自己有实作并使用过後再来学习更进阶的 Redux 使用方法，大大们的文章为大家整理如下：

• May - [Day 22 - Redux] 有了Redux，状态管理没烦恼
• eugenechen - Day 23 - 二周目 - Redux 串接 React 与 Redux DevTools
• eyesofkids - Day 25: Redux篇 - 介绍 与 第一个范例

那明天想跟大家介绍的是在 React.js 中撰写样式的方法，因为铁人赛的最後我会实作一个 React.js 的网站，加上前面的章节都是着重在 React.js 的逻辑与功能部分，所以会在明天为大家补上画面样式的章节罗！
有任何问题一样都非常非常欢迎提出和指教唷～
那我们下篇见ʘ‿ʘ

参考资料：

• Redux Fundamentals
• Redux Basics
• [Redux] Redux Basic 基础