Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

42
Vistas
How to add to redux-perist blacklist a nested properity in state redux

I'm trying to persist all state expect some properties that i don't want in a redux store, i store them in an array, the reducer look like this

export interface NoteI {
  id?: number | Date;
  header?: string;
  note?: string;
  date?: Date;
  selectStatus?: boolean;   /// i want to keep this false everytime i reload the app
}
let NoteList: NoteI[] = [];

const noteReducer = createSlice({
  name: "note",
  initialState: NoteList,
  reducers: {
    addNote: (state, action: PayloadAction<NoteI>) => {
      const newNote: NoteI = {
        id: new Date(),
        header: action.payload.header,
        note: action.payload.note,
        date: new Date(),
        selectStatus: false,
      };
      state.push(newNote);
    },
    removeNote: (state, action: PayloadAction<NoteI>) => {
      return state.filter((item) => item.selectStatus !== true);
    },
    toggleSelect: (state, action: PayloadAction<NoteI>) => {
      return state.map((item) => {
        if (item.id === action.payload.id) {
          return { ...item, selectStatus: !item.selectStatus };
        }
        return item;
      });
    },
    loadDefault: (state) => {
      return state.map((item) => {
        return { ...item, selectStatus: false };
      });
    },
    editNote: (state, action: PayloadAction<NoteI>) => {
      return state.map((item) => {
        if (item.id === action.payload.id) {
          return {
            ...item,
            note: action.payload.note,
            header: action.payload.header,
            date: action.payload.date,
          };
        }
        return item;
      });
    },
  },
});

export default noteReducer.reducer;
export const { addNote, removeNote, editNote, toggleSelect, loadDefault } =
noteReducer.actions;

Now i want everytime i close the app, all the state remain the same, except the selectStatus

The store will look like this:

const reducer = combineReducers({
  note: noteReducer,
});
const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  blacklist: [],
};
const persistedReducer = persistReducer(persistConfig, reducer);
const store = configureStore({
  reducer: { persistedReducer, toggle: toggleReducer },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export default store;
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const persistStorageNote = persistStore(store);

I heard about blacklist in redux-persist, but the example only apple for state is not array like this. Please help, thank a lots

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos