redux-persist

1702 단어
registerUser: function (user, success, fail) {
      API.registerUser(user, function(userServer){
        var localUser = UserLocalStorage.serverUserToLocalUser(userServer);

        UserLocalStorage.save(localUser);
        this.user = localUser;
        if(success){
          success();
        }
      }.bind(this), fail);

  }

 , 。
if (!this.user) {
      this.user = {};
      UserLocalStorage.get(function (user) {
        this.user = user;
      }.bind(this));
    }


로그인해야 접근할 수 있는 페이지에 들어가서user가 있는지 확인하고, 로컬 저장소에서 우선적으로 가져오지 않으면 확인합니다.만약 한두 개의 상태만 지속화되어야 한다면, 우리는 유사한 코드를 작성할 수 있다. 만약 대량의 상태가 지속화되어야 한다면?

redux-persist 도입

import {persistStore, autoRehydrate} from 'redux-persist'
const store = createStore(reducer, autoRehydrate())
persistStore(store)

가장 간단한 방법은 바로 이 세 줄 코드입니다. 이 세 줄 코드가 우리가 어떤 일을 완성하는 데 도움을 줄 수 있는지 봅시다.
persistStore(store, [config, callback])
arguments

    blacklist  ,  reducers   key。

    whitelist  , ,  key  。

    storage   Engine,  LocalStorage   AsyncStorage

    transforms   rehydration   storage  

    debounce storage  。

    store redux store   store。

    config  

callback rehydration  。

returns   persistor  , 。

이 방법은 주로 우리가 두 가지 일을 하는 데 도움을 주었다. store를 저장하는persistor와rehydrationaction의dispatch를 생성하고 autoRehydrate라는 증강기(enhancer)와 결합하면 우리가 앞에 쓴 코드를 완성할 수 있다. 만약에 우리store의 모든 데이터가 지속화되고 특별한 수요가 없다면 간단한 두 줄의 코드로 문제를 해결할 수 있다.
auto Rehydrate의 증강기는 무엇입니까?사실도 간단하다. 만약에 특수한merge 논리가 없다면,storage의 데이터로 복구(rehydrate)store의 데이터를 복구하면,autoRehydrate를 사용할 수 있다. 그는 간단한 합병 논리를 할 수 있으며,state가 Reducer에 의해 바뀌면,storage의 원래 값을 바꾸는 것도 똑똑하다.원문

좋은 웹페이지 즐겨찾기