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

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

我的看法如下：

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

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

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

簡(jiǎn)單的聊一聊redux

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

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

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

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

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

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

前端知識(shí) | Redux的使用

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

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

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

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

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

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

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

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

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

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

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