기본 + Redex-perist 반응: 키(블랙리스트)를 무시하는 방법?

기본 + Redex-perist 반응: 키(블랙리스트)를 무시하는 방법?

설정을 저장하는 중redux-persist그리고, 예를 들어, 충돌 후와 같이 재시동할 때마다 재설정되도록 하기 위해 그들 중 몇몇은 무시하기를 원한다.

다음과 같이 일련의 환원기 이름을 추가할 수 있다.blacklist또는whitelist, 하지만 나는 특정한 키를 무시하고 싶다, 예를 들어.settings.isLoggedIn대신에settings.

// ...
function configureStore(initialState) {
    const store = createStore(
        RootReducer,
        initialState,
        enhancer
    );

    persistStore(store, {
        storage: AsyncStorage,
        blacklist: ['router', 'settings'] // works, 'settings.isLoggedIn' doesn't.
    }, () => {
        // restored
    });

    return store;
}
// ...

다른 환원기를 만들어야 하나, 아니면 이 문제에 대한 해결책은 누구라도 있는가?

미리 고마워!

문서에 따라 블랙리스트 매개 변수에는 다음이 포함된다.'keys (읽기: reducers to unse)', 그래서 나는 네가 원하는 행동을 할 수 없을 것 같다.그 기능을 직접 시도해보고 구현할 수 있지만, 패키지의 코드베이스는 정말 속성 대신 블랙리스트 작성에 초점이 맞춰져 있다고 생각한다(이것 참조).유일한 해결책은 당신의 비영구적 키에 대한 별도의 환원기를 만드는 것밖에 없을 것 같다(내 경험상 그다지 번거롭지 않다).

변환을 사용하여 개별 필드 저장(예:username환원형으로MyForm안쪽에state.form.MyForm:

const formName = `MyForm`

const formTransform = createTransform(
  (inboundState, key) => {
    return {
      ...inboundState,
      [formName]: {
        values: {
          username: _.get(inboundState, `${ MyForm }.values.username`)
        }
      }
    }
  },
  (outboundState, key) => {
    return outboundState
  },
  { whitelist: [`form`] }
)

persistStore(store, {
  whitelist: [
    `form`
  ],
  transforms: [
    formTransform
  ]
})

이 경우 중첩된 지속을 사용할 수 있다.

import { persistStore, persistReducer } from 'redux-persist';


const rootPersistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['auth']
}

// here you can tell redux persist to ignore loginFormData from auth reducer

const authPersistConfig = {
  key: 'auth',
  storage: storage,
  blacklist: ['loginFormData']
}

// this is your global config
const rootReducer = combineReducers({
  auth: persistReducer(authPersistConfig, authReducer),
  other: otherReducer,
})

// note: for this to work, your authReducer must be inside blacklist of 
// rootPersistConfig

const myReducerConfig = {
  key: "cp",
  storage: storage,
  blacklist: ["authReducer"],
  debug: true
};

당신은 당신이 아끼고 싶은 모든 소품들을 위해 환원기를 만들어야 한다.

간단한 해결책은 보관하고자 하는 키만 필터링하는 'persist/REHIDRATE' 액션을 사용하여 전체 환원기를 화이트리스트 및 환원기에 저장하는 것이다.

예:

// configureStore.js
const persistConfig = {
  keyPrefix: 'webapp',
  whitelist: ['filters'],
}

// filtersReducer.js
const projectsBase = {
  [KEYS.SORT]: PROJECTS_SORT_TYPE.NAME,
  [KEYS.TEXT]: '',
}
const itemsBase = {
  [KEYS.SORT]: ITEMS_SORT_TYPE.INDEX,
  [KEYS.TEXT]: '',
}

const base = {
  [KEYS.PROJECTS]: projectsBase,
  [KEYS.ITEMS]: itemsBase
}

export const filters = (state = base, action) => {
  const { type } = action
  switch (type) {
    case PERSIST_REHYDRATE_ACTION_TYPE: {
      if (action.payload.filters) {
        const filters = action.payload.filters
        const projectsSort = _.get(filters, [KEYS.PROJECTS, KEYS.SORT])
        const itemsSort = _.get(filters, [KEYS.ITEMS, KEYS.SORT])
        const newBase = { ...base, 
                         [KEYS.PROJECTS]: {
                             [KEYS.SORT]: projectsSort
                         },
                         [KEYS.ITEMS]: {
                             [KEYS.SORT]: itemsSort
                         }}
        state = newBase
      }
    }
      break
    default:
      break
  }
  return state
}

@martinarroyo가 좋은 선택인 별도의 환원기를 만들기 위해 언급했듯이 만약 우리가 그것을 따르고 오류에 대한 분리 환원기를 만든다면, 우리는 단순히 빈 상태를 기본값으로 되돌릴 수 있다.

const initialState = {
    error: null
}

export default errorReducer = (state = initialState, action) => {
    switch (action.type) {
        ...         
    
        default:
            return {
                ...state,
                error: null
            }
    }
}

이것은 우리가 사이트를 방문할 때마다 오류가 무효로 설정되고 있기 때문에 그 상태를 지울 것이다.

참조URL: https://stackoverflow.com/questions/41197502/react-native-redux-persist-how-to-ignore-keys-blacklist