react項目中，用戶數(shù)據(jù)本地存儲localStorage也可以,為什么還要使用redux？

react項目中，用戶數(shù)據(jù)本地存儲localStorage也可以,為什么還要使用redux？

我的看法如下：

LocalStorage 雖然也是可以作為數(shù)據(jù)存儲的手段，但是有以下缺點：

LocalStorage目前只能存儲的是類型只能是字符串，沒有辦法存其他類型的
LocalStorage在瀏覽器隱私模式下的話，是沒辦法被讀取到的
LocalStorage 如果存的內(nèi)容過多的話，可能會造成頁面卡頓

Redux 的便捷之處在于，有一個全局的數(shù)據(jù)中心可以對數(shù)據(jù)進(jìn)行存取，且可以結(jié)合到每個頁面上，當(dāng)數(shù)據(jù)進(jìn)行變化時，我們可以方便地驅(qū)動頁面進(jìn)行更新，而不用反復(fù)對 LocalStorage 中的數(shù)據(jù)進(jìn)行讀寫
Redux 的數(shù)據(jù)可以區(qū)分模塊，方便我們進(jìn)行管理
一般情況下，我們也會將需要保存的數(shù)據(jù)保存到 LocalStorage 中，我們刷新頁面后能夠讀取到。

簡單的聊一聊redux

?如果你react項目中你不知道什么時候應(yīng)該使用redux，那就是你不需要它,redux的創(chuàng)造者?Dan Abramov?補(bǔ)充過這樣一句話: 只有當(dāng)遇到?react 解決不了的問題，才需要?redux!!! 簡單的來說，如果你的UI層非常簡單，組件之間沒有很多的數(shù)據(jù)相互，Redux 就不需要，用了反而增添項目的復(fù)雜性，不方便后期的維護(hù)。?以下場景你可能需要使用上redux: 1、某個組件的狀態(tài)，需要共享 2、某個狀態(tài)需要在任何地方都可以拿到 3、一個組件需要改變?nèi)譅顟B(tài) 4、一個組件需要改變另一個組件的狀態(tài) Redux 的設(shè)計思想很簡潔，簡單的用一張圖來描述吧。

1、Store Store 就是保存數(shù)據(jù)的地方，你可以把它看成一個容器，整個應(yīng)用只有一個Store。

Redux 提供?createStore 這個函數(shù)用來生成 Store2、State Store 對象包含所有的數(shù)據(jù)，如果想得到某個時刻的數(shù)據(jù)，就要對 Store生成快照，這種**，叫做State。當(dāng)前 Store ，可以通過?getState() 拿到。 store.getState()拿到的就是redux中存儲的state值 3、Action State 的變化，會導(dǎo)致 頁面UI 的變化。但是用戶接觸不到 State，只能接觸到 頁面UI，所以State 的變化必須是頁面用戶導(dǎo)致的。

因此Action 就是 頁面用戶觸發(fā)改變 State 的通知。 Action 是一個對象，期中?type?的屬性是必須的，表示 Action 的名稱，其他的屬性可以自由設(shè)置data表示要修改或者儲存的數(shù)據(jù)。 4、store.dispatch 這個是 用戶 發(fā)出 Action 的**方法，接受一個 Action 對象作為參數(shù)，將它發(fā)送出去?。

5、Reducer Store 收到 Action 以后，必須要給出一個新的 State，這樣 頁面數(shù)據(jù)才會發(fā)生變化，這種 State 的計算過程我們叫做 Reducer?。store提供了3個方法: 1、store.getState() //獲取state的數(shù)據(jù) 2、store.dispatch() //觸發(fā)action修改數(shù)據(jù) 3、store.subscribe() //檢測redux狀態(tài)的變化，一旦有變化，store就會調(diào)用監(jiān)聽函數(shù)就會render重新渲染頁面 實際項目中，需要權(quán)衡是直接使用Redux還是用React-Redux，那么它是什么呢? react-redux主要用于關(guān)聯(lián)react和redux之間的一個數(shù)據(jù)交互插件，實現(xiàn)react組件和redux完美結(jié)合起來。 以下就用一個案列來簡單的看一下吧。

首先看一下基本目錄?1、connect()連接 2、<Provider> 組件 connect方法生成容器組件以后，需要讓容器組件拿到state對象，才能生成 UI 組件的參數(shù)。 React-Redux 提供Provider組件，傳入store，可以讓容器組件拿到state 好了、大概就介紹這里吧、里面還是有很多注意的關(guān)鍵點，不懂的同學(xué)多瞧一瞧慢慢理解每一個api，其實寫幾個demo之后就能知道了。

前端知識 | Redux的使用

什么是 Redux? Redux 是整個項目的狀態(tài)管理中心，數(shù)據(jù)存儲倉庫，集中式的存儲和管理所有的組件的狀態(tài)，并且可以讓組件的狀態(tài)以一種可預(yù)測的方式變化。 什么情況下使用 Redux？ Redux 主要作為一個狀態(tài)樹的存在，主要作用可以用來集中管理共享數(shù)據(jù)，如果你想取某個數(shù)據(jù)，你就直接從狀態(tài)樹（store）上拿,你修改數(shù)據(jù)，其他頁面上從狀態(tài)樹上取到的數(shù)據(jù)也會發(fā)生改變（如果你用了 subscribe 監(jiān)聽函數(shù)或者使用了 react-redux 類似的庫幫你監(jiān)聽，則其他頁面取到的數(shù)據(jù)會自動更新），Redux 不是必須的，它的使用場景是當(dāng)你覺得項目內(nèi)的組件通信太過于繁瑣的時候使用，比如你有很多頁面，很多組件，他們之間的通信很麻煩，或者說有些數(shù)據(jù)你需要保存起來供所有組件使用,這時候 Redux 的作用就體現(xiàn)出來了。

正如 Redux 的作者所說： Flux 架構(gòu)就像眼鏡：您自會知道什么時候需要它。

核心概念 action action 是一個對象,它包含了引起 store 狀態(tài)變化的行為，他是將數(shù)據(jù)運(yùn)輸至 store 里的**手段。它通常包含一個 type 屬性和一個需要傳入 store 的數(shù)據(jù)，數(shù)據(jù)類型可以自定義。比如我們在做用戶登錄的時候經(jīng)常需要將用戶信息保存到 Redux，這時候 action 就可以是： reducer action 僅僅申明了我們想要改變 store 以及附帶的數(shù)據(jù)，那么我們到底怎么去改變數(shù)據(jù)呢，比如說有**用戶的 money 變?yōu)?000，那么傳入的 action 是： 那么這時候我們要怎么取改變 store 里面的值呢？這時候就要用到 reducer 簡單來說，reducer 就是根據(jù)傳入 actioon 類型描述如何去更改 store 中的狀態(tài)。 store 單一狀態(tài)樹 action 描述了更改數(shù)據(jù)行為的發(fā)生，reducer 描述了如何去更改數(shù)據(jù),那么我們數(shù)據(jù)還要有一個歸宿就是 store，Redux 的核心就是一個 store 對象，它里面包含著我們所儲存的所有狀態(tài)，它類似一個物流中心，我們可以往里面存放數(shù)據(jù)，也可以從里面取出數(shù)據(jù)。

它提供的方法包括: 1、getState() 獲取當(dāng)前的的 state 狀態(tài)值 2、dispatch(action) 派發(fā)一個 action 行為更新 state 3、subscribe(listener) 注冊一個***(當(dāng) state 跟新完了之后會自動執(zhí)行) 這樣這三個東西就串聯(lián)在一起了。 store.dispatch(action) 用來接收不同的 action，表明要更新 state 的 type 類型以及更新需要的數(shù)據(jù)，再通過 reducer 函數(shù)計算到底怎么去更改 state，加還是減。 說了這么多，我們**上個例子吧： app.jsaction.jsreducer.jsstore.jsPS：這是最原始的 redux 使用方法，在實際開發(fā)中，通常還會結(jié)合 create-redux 等插件一起使用。

redux 及在Android上應(yīng)用 rekotlin

redux 的概念來源于前端，是一個“可預(yù)測的狀態(tài)容器”，采用“單向數(shù)據(jù)流”的思想，目的是為了讓JS的狀態(tài)管理變得更加可預(yù)期。 redux 存在的目的是為了解決組件之間的通信以及集中保存管理項目的狀態(tài)。

隨著項目變得越來越大，組件之間的通信越來越復(fù)雜，狀態(tài)越來越多，項目就變得難以維護(hù)。

使用redux管理狀態(tài)，是將所有狀態(tài)都保存在store中，各組件可以直接從store中獲取到自己需要的狀態(tài)。這樣將全局狀態(tài)保存到一處統(tǒng)一管理，使項目更加容易維護(hù)，組件之間的通信更加清晰。 4 張動圖解釋為什么（什么時候）使用 Redux kotlin中使用data class表示State，方便進(jìn)行copy()操作 Reducer 函數(shù)最重要的特征是，它是一個純函數(shù)。也就是說，只要是同樣的輸入，必定得到同樣的輸出。

由于 Reducer 百科是純函數(shù)，就可以保證同樣的State，必定得到同樣的 View，任何時候，與某個 View 對應(yīng)的 State 總是一個不變的對象。但也正因為這一點，Reducer 函數(shù)里面不能改變 State，必須返回一個全新的對象。因而State**是只讀的。

狀態(tài)可預(yù)測 ：相同的State和Action傳遞給Reducer，輸出的結(jié)果總是相同的（純函數(shù)特性）。且當(dāng)你需要修改狀態(tài)時，必須重新開始走一個修改的流程，這種限制狀態(tài)修改的方式，讓狀態(tài)變得可預(yù)測，容易調(diào)試。 可維護(hù)性 ：具有 Redux 知識的人更容易理解任何 Redux 應(yīng)用程序的結(jié)構(gòu)，且有助于用戶將業(yè)務(wù)邏輯與組件樹分離。

單向數(shù)據(jù)流 ：所有狀態(tài)的改變可記錄、可跟蹤，源頭易追溯，數(shù)據(jù)具有**出口和入口，使得數(shù)據(jù)操作更直觀更容易理解。