web-dev-qa-db-ja.com

Reactネイティブ+ redux-persist：キーを無視する方法（ブラックリスト）？

設定をredux-persistで保存していますが、再起動するたびにリセットされるように、一部を無視したいと思います。クラッシュした後。

レデューサー名の配列をblacklistまたはwhitelistとして追加することは可能ですが、特定のキーを無視したいと思います。 settingsの代わりにsettings.isLoggedIn。

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

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

    return store;
}
// ...

別のレデューサーを作成する必要がありますか、それともこの問題の解決策はありますか？

前もって感謝します！

javascriptreactjsreact-nativereduxreact-redux
12
Mr. B.

documentation のように、ブラックリストパラメータには次のものが含まれています： '無視するキー（読み取り：レデューサー）'なので、希望する動作を実装することはできません。その機能を自分で試して実装することもできますが、パッケージのコードベースは、プロパティではなくレデューサーのブラックリストに焦点を当てていると思います（ this を参照）。唯一の解決策は、非永続キー用に個別のレデューサーを作成することです（私の経験では、それほど面倒ではありません）。

6
martinarroyo

変換を使用して、個別のフィールドを保存します。たとえば、username in redux-form MyForm inside 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
  ]
})
6
lokhmakov

保存するすべての小道具に対してレデューサーを作成する必要があります。

1
Ahmed Ali

これにはNested Persistsを使用できます。

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
};
1
shubham choudhary

簡単な解決策は、レデューサー全体をホワイトリストに保存し、その後、「persist/REHYDRATE」アクションを使用してレデューサーに保存し、保持するキーのみをフィルター処理することです。

例：

// 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
}
1
93sauu