Início / coding / Perguntas / 78749357
Accepted
scrscr87
Asked: 2024-07-15 18:31:58 +0800 CST

Redux Persist - Criar filtro

  • 772

Sou novo no React Redux. Você pode me dizer como escrever manualmente a função saveUserFilter abaixo ? Não quero mais usar redux-persist-transform-filter, pois está usando lodash.set, que é vulnerável à poluição do protótipo.

const saveUserFilter = createFilter('user', [
  'username',
  'displayName',
  'timeZone',
])

const persistConfig = {
  key: KEY,
  storage,
  whitelist: [
    'user',
    'timeZones',
  ],
  transforms: [ saveUserFilter ],
}
redux

1 respostas

  1. Best Answer

    Feliz em te ver! Eu sei como você se sente sobre lodash.seto que é usado redux-persist-transform-filterpode ser vulnerável à poluição do protótipo, especialmente quando consideramos os casos em que a atribuição de objeto usa Object.create(). Mas não se preocupe porque existe um método fácil que pode ajudá-lo a se livrar desse método ao salvar filtros do usuário, usando o seguinte.

    Primeiro, vamos definir a saveUserFilterfunção. Esta função filtrará manualmente o userestado para incluir apenas as propriedades necessárias: username, displayName, e timeZone.

    Veja como você pode fazer isso:

    import { createTransform } from 'redux-persist';

const saveUserFilter = createTransform(
  // Transform state before it's serialized and persisted.
  (inboundState, key) => {
    if (key === 'user') {
      // Only include specific properties in the persisted state.
      const { username, displayName, timeZone } = inboundState;
      return { username, displayName, timeZone };
    }
    return inboundState;
  },
  // Transform state being rehydrated.
  (outboundState, key) => {
    return outboundState;
  },
  // Specify which reducer this transform applies to.
  { whitelist: ['user'] }
);

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['user', 'timeZones'],
  transforms: [saveUserFilter],
};

export default persistConfig;

    Explicação:

    1. Criar transformação: estamos usando redux-persistpara createTransformdefinir uma transformação personalizada.
    2. Estado de entrada: esta parte filtra o estado antes de ser salvo. Estamos apenas mantendo as propriedades ( username, displayName, timeZone) que precisamos do userestado.
    3. Estado de saída: apenas retorna o estado em que se encontra quando é reidratado.
    4. Whitelist: Especificamos o userredutor na whitelist para que esta transformação seja aplicada apenas a ele.

    Para mais detalhes sobre como criar transformações com redux-persist, você pode conferir a documentação oficial .

    Sinta-se à vontade para entrar em contato se tiver mais dúvidas ou precisar de mais ajuda. Boa sorte com seu projeto!

    • 1

relate perguntas