5

Redux-persist đuỷnh kout handle storage

đăng cách đây 8 tháng

Xin chào mọi người, chào mừng mọi người quay lại với chanel của mình là à nhầm... Hồi giờ các bạn đã qúa quen thuộc với một số library redux-middleware như thunk/saga hôm nay mình xin giới thiệu với bạn đuỷnh kout xử lí localsStorage chính là Redux-persist! Let's begin guys.

Các bạn có đọc từ đầu khó hiểu quá thì nhớ kéo xuống cuối đọc rồi scroll ngược lại đọc từ đầu nhé!

https://nextlint.com
✧ ✧ ✧

Hôm nay mình được giao 1 cái task, đó là khi user send money thì lưu lại list receivers do app blockchain nên data sẽ không lưu phía server mà lưu phía client (privacy). Thao tác với localStorage không dễ chịu chút nào khi mà những actions CRUD (create, research, update, delete) đều đòi hỏi phải reload lại list chưa kể phần mệt nhất là  data-flow giữa các component (refer các bạn đọc kĩ redux là gì?, tại sao nên dùng redux? để hiểu rõ về data-flow hơn nhé) và xử lí AsyncStorage của ReactNative (không như web localStorage sync).

nextlint.com

Thế nên mình suy nghĩ giá như có cách nào đó mà khi start, app chúng ta load data from localStorage lên redux store (cụ thể là receiversReducer or root state) sau đó thao tác với nó thông qua các actions CRUD lúc đóng app chúng ta chỉ take a snapshot state của receiversReducer or root state lưu xuống localStorage vừa giải quyết được data-flow vừa tracking được actions.

Và... chào mừng ví quỵ và các bạn đến với chanel của mình! nhầm... mình đã tìm ra một thứ khá hay ho chính là Redux-persist!

1/ Khái niệm

Redux Persist takes your Redux state object and saves it to persisted storage. Then on the app launch, it retrieves this persisted state and saves it back to redux.

Redux-persist sẽ lấy một bản snapshot của redux state và lưu nó vào storage cố định. Khi app chúng ta khởi động, nó sẽ lấy state cố đinh này và lưu nó lại vào redux. Nôm na là thế.

2/ Cài đặt

Chúng ta để ý thành phần sau 

persistedReducer(config, reducer): trả về một enhanced reducer

  • config:  key nếu xem dưới local bạn sẽ thấy key name là 'persist:[key]', storage ở đây storage đối với react-native là AsyncStorage và web là storage ngoài ra còn một số config thuộc dạng option như whitelist, blacklist, version, stateReconciler, debug

* whitelist, blacklist

Đơn giản thì bạn có thể hiểu root state của bạn là một nested state và bạn chỉ muốn navigation state được persist còn profile state và receivers state thì không thì chúng ta sẽ dùng whitelist! Tương tự như blacklist.

Khó hiểu nhỉ, không sao scroll tiếp nào.

Whitelist: có nghĩa là khi start app lên redux-persist sẽ lấy bản snapshot của 1 mình thằng navigation thôi sau đó lưu lên redux-store cho chúng ta thao tác các actions còn 2 thằng profile và receivers sẽ không được lưu or lấy gì hết đại loại là chỉ tương tác với navigation. 

Blacklist: chừa thằng đó ra không tương tác

State Reconciler

Định nghĩa incoming state (state from local) được merged như thế nào với initial state (default root state)

  • hardSet
  • autoMergeLevel1 (default)
  • autoMergeLevel2

Usage

Persist Gate

Nếu như chúng ta muốn do some stuff khi redux-persist đang handle persist state thì có thể dùng Persist Gate để delay việc render UI cho đến khi hoàn thành.

✧ ✧ ✧

Dài dòng như vậy như cuối cùng bạn có rút ra được gì không? Bản chất redux-persist vẫn giải quyết vấn đề muôn thuở của React là data-flow. 

Chúng ta đều biết rằng data trong react được truyền dưới dạng one-way binding tức là pass data from parent to children, nếu như muốn update lại component bắt buộc phải dùng setState or change props from parent. (bind 1 chiều không như vue / angular bind 2 chiều) thế nên bạn đọc xong mà có khó hiểu thì chỉ cần đơn giản nhớ rằng. Redux-persist sinh ra cũng chỉ giải quyết data-flow thôi!

Như vậy mình đã giới thiệu sơ lược cho các bạn bề redux-persist, nếu muốn tìm hiểu sâu hơn hay visit main page nhé. Thanks!

#react-native#redux-persist#localstorage#redux
5
0
...