[ Day 22 ] React 中的 State 管理 - Redux

今天进入到全新的篇章 Redux 了！
Redux 是 React.js 中很常拿来作为状态管理使用的一个套件，在 Vue.js 的框架中也有一个 Vuex 是专门用来处理各个元件的资料储存和管理的套件。
那我们就来看看这个 Redux 的概念和原理吧～

Redux

A Predictable State Container for JS Apps.

从官网看到的简介是这样的一句话，直翻成中文可能会有点搞不清楚，不过 Redux 其实就是一个能够在 JavaScript 应用程序中集中储存和管理 State 资料的一个套件。

在一开始还没有接触 React.js 之前，一直都知道有 Redux 的存在也大概知道它的功能类似於 Vue.js 框架中的 Vuex 状态管理的概念。不过透过这次研究了一下後发现 Redux 其实也不是由 Facebook 的团队开发出来的（ React Router 也不是），而且透过上面的叙述可以知道 Redux 并不一定只能使用在 React.js 当中，只要是以 JavaScript 为基础开发的应用程序或网站都能够使用。

不过在进入到实际应用的阶段之前，我们可以先来探讨为什麽在专案中会需要使用到类似这种状态管理的套件呢？

元件之间的资料传递

在前面的章节我们提过 React.js 中的不同类别的元件且元件本身也可以透过 props 还有 state 做资料的传递和沟通，不过当专案的规模逐渐壮大、元件越来越多的时候，若我们需要传递资料到不同的元件当中时很有可能要绕过很多父层的元件才能顺利将资料传递到我要的元件当中。

因此，Redux 等资料状态管理的套件就出现了！首先它会建立一个 Store 来存放元件内我们想要使用的资料，随後我们就可以在需要的元件内直接向该 Store 去提取资料，再也不用透过 props 或 state 一层层的绕远路来传递值或资料。

原本要一层一层沟通的元件现在透过了 Redux 的帮忙後，变得更容易去取得我们需要的资料和内容了，是不是很棒？

备注：原本一直以为 Redux 也是 React.js 的团队开发的（因为名字也很像），结果其实根本没有关系啊～

那知道 Redux 可以为我们做了什麽事之後，下面就直接来看要怎麽在专案中应用 Redux 吧！

使用 Redux

下载 Redux

/* 透过 npm 安装 redux 和 react-redux */
npm install redux react-redux

我们先在专案中安装这两个套件。会需要额外下载一个 react-redux 的原因是 redux 本身是独立的一个状态管理套件，若要将该套件连接到我们的 React.js 专案的话就必须要使用 react-redux 来帮助这两个套件做绑定。

但上述的绑定是指什麽？为什麽需要绑定？白话文来说，我们可以这样理解这两个套件之间的差别：

• redux ：将元件的资料和状态存放以及管理於其中的套件。
• react-redux：将 React.js 中所处理的画面连结到 redux 中所管理跟存放的资料。

所以知道究竟下载了什麽相关套件至专案中之後，要继续往下来了解在 Redux 中的三大原则了。

Redux 三大原则

1. Single Source of Truth ：
   所有的元件 State 都只会有单一的资料来源，并储存於一个叫做 store 的物件当中。

   这边的意思是说存放在 store 的每一笔资料在该物件内都只会有一个对应的值（或是位址），不会重复出现在专案或是应用程序当中的其他地方，是唯一的一笔资料来源。
   这麽做的好处是当我们需要 debug 时，便能快速地找到对应的资料的问题在哪边。

2. State is Read-Only ：
   在 store 当中所存入 State 中的值或资料是不能直接修改的。

   在 Redux 的 State 内所储存的值是唯独的，所以如果需要修改的它的话只能透过 Redux 提供的 action 来做修改，这代表每次的修改都必须藉由 action 的物件来触发。

3. Changes are Made with Pure Reducer Functions ：
   必须采用 Pure Function 才能够依照指定的 action 来改变 State 值。

   这边所提到的 Pure Function 其实指的就是 Redux 核心功能其中之一的 reducer() 这个方法，在 reducer() 中会将之前的 State 值和一个 action 当作参数带入到其中并返回一个新的 State 值。

备注：关於 reducer() 这个功能我们会在下一篇为大家介绍～到时候会附上传送门的

Redux 这个章节应该是铁人赛一路写下来最吃力的了，意外发现它的观念和功能要全部了解的话其实需要非常多的时间。所以在这系列当中我会针对它主要的概念去做介绍，而其他比较进阶的功能和实际应用我会在下一篇的文章中汇整所有前辈们的资料给大家。

今天就先到这边告一个段落了，欢迎大家多多指教！
那我们下篇见ʘ‿ʘ