前端知識 | Redux的使用

什么是 Redux?

Redux 是整個項目的狀態管理中心，數據存儲倉庫，集中式的存儲和管理所有的組件的狀態，并且可以讓組件的狀態以一種可預測的方式變化。

什么情況下使用 Redux？

Redux 主要作為一個狀態樹的存在，主要作用可以用來集中管理共享數據，如果你想取某個數據，你就直接從狀態樹（store）上拿,你修改數據，其他頁面上從狀態樹上取到的數據也會發生改變（如果你用了 subscribe 監聽函數或者使用了 react-redux 類似的庫幫你監聽，則其他頁面取到的數據會自動更新），Redux 不是必須的，它的使用場景是當你覺得項目內的組件通信太過于繁瑣的時候使用，比如你有很多頁面，很多組件，他們之間的通信很麻煩，或者說有些數據你需要保存起來供所有組件使用,這時候 Redux 的作用就體現出來了。

正如 Redux 的作者所說：

       Flux 架構就像眼鏡：您自會知道什么時候需要它。

核心概念

action

action 是一個對象,它包含了引起 store 狀態變化的行為，他是將數據運輸至 store 里的唯一手段。它通常包含一個 type 屬性和一個需要傳入 store 的數據，數據類型可以自定義。比如我們在做用戶登錄的時候經常需要將用戶信息保存到 Redux，這時候 action 就可以是：

reducer

action 僅僅申明了我們想要改變 store 以及附帶的數據，那么我們到底怎么去改變數據呢，比如說有一天用戶的 money 變為2000，那么傳入的 action 是：

那么這時候我們要怎么取改變 store 里面的值呢？這時候就要用到 reducer

簡單來說，reducer 就是根據傳入 actioon 類型描述如何去更改 store 中的狀態。

store

單一狀態樹

action 描述了更改數據行為的發生，reducer 描述了如何去更改數據,那么我們數據還要有一個歸宿就是 store，Redux 的核心就是一個 store 對象，它里面包含著我們所儲存的所有狀態，它類似一個物流中心，我們可以往里面存放數據，也可以從里面取出數據。它提供的方法包括:

       1、getState() 獲取當前的的 state 狀態值

       2、dispatch(action) 派發一個 action 行為更新 state

       3、subscribe(listener) 注冊一個監聽器(當 state 跟新完了之后會自動執行)

這樣這三個東西就串聯在一起了。

       store.dispatch(action) 用來接收不同的 action，表明要更新 state 的 type 類型以及更新需要的數據，再通過 reducer 函數計算到底怎么去更改 state，加還是減。

說了這么多，我們最后上個例子吧：

app.js

action.js

reducer.js

store.js

PS：這是最原始的 Redux 使用方法，在實際開發中，通常還會結合 create-redux 等插件一起使用。

 -END-