React native + redux-persist:如何忽略键(黑名单)?

时间:2016-12-17 10:12:55

标签: javascript reactjs react-native redux react-redux

我使用redux-persist存储我的设置,并希望忽略其中一些设置,以便在每次重启时重置它们,例如在崩溃之后。

可以将减少名称数组添加为blacklistwhitelist,但我想忽略特定键,例如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;
}
// ...

我是否必须创建另一个减速器或者是否有人解决此问题?

提前致谢!

6 个答案:

答案 0 :(得分:6)

根据documentation,blacklist参数包含:'keys(read:reducers)to ignore',所以我担心无法实现你想要的行为。您可以自己尝试并实现该功能,但我认为该软件包的代码库真正专注于将reduceper列入黑名单而不是属性(请参阅this)。我担心唯一的解决方案是为你的非持久密钥创建一个单独的reducer(根据我的经验,这并不是一件麻烦事。)

答案 1 :(得分:5)

使用转换来保存单独的字段,例如username内的redux-form 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
  ]
})

答案 2 :(得分:1)

您必须为要保存的每个道具创建减速器。

答案 3 :(得分:1)

一个简单的解决方案是使用“ persist / REHYDRATE”操作将整个reducer保存在白名单中,然后保存在reducer中,以仅过滤要保留的键。

示例:

// 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
}

答案 4 :(得分:1)

您可以为此使用嵌套的人

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
};


答案 5 :(得分:0)

正如 @martinarroyo 提到的,创建一个单独的减速器是一个不错的选择,如果我们遵循它并为错误创建一个单独的减速器,我们可以简单地返回一个空状态作为默认值;

const initialState = {
    error: null
}

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

这将在我们每次访问站点时清除状态,因为默认将错误设置为 null。