2024-09-10
4130
#react#redux
Taminoturoko Briggs
113568
Sep 10, 2024 ⋅ 14 min read

Persist state with Redux Persist using Redux Toolkit in React

Taminoturoko Briggs Software developer and technical writer. Core languages include JavaScript and Python.

Recent posts:

How to format dates in JavaScript: Methods, libraries, and best practices

JavaScript date handling can be tough. Here are some native Date API tools and specialized libraries to tackle them with.

Nelson Michael
May 8, 2025 ⋅ 8 min read
tailwind typography

How to use the Tailwind Typography plugin

Walk you through how to set up and use the Tailwind Typography plugin, also known as the @tailwindcss/typography or the prose plugin.

David Omotayo
May 7, 2025 ⋅ 7 min read
Running TypeScript In Node.js: Tsx Vs. Ts-node Vs. Native

Running TypeScript in Node.js: tsx vs. ts-node vs. native

TypeScript adds static typing to JavaScript code, which helps reduce unpredictable behavior and bugs. In the past, TypeScript code couldn’t […]

Amazing Enyichi Agu
May 7, 2025 ⋅ 8 min read
Authentication And Authorization In Astro

Authentication and authorization in Astro

Implement secure authentication and role-based authorization in Astro using JWT, SSR, and Astro middleware for protected routes.

Emmanuel John
May 6, 2025 ⋅ 23 min read
View all posts

7 Replies to "Persist state with Redux Persist using Redux Toolkit in React"

  1. I’m amazed that a developer suggests to use a package that hasn’t been updated for 3 years. Redux, React has moved on – many people that tried this package failed for that reason. But even if that wouldn’t already be the case, do you really want to recommend to developers a strategy that is doomed sooner or later?

  2. the top code has a lot of issue:
    by writing bottom code you can implement currectly:

    my store folder structure fro react redux:

    store __ features __ user.ts
    | | __ auth.ts
    | __ reducer.ts
    | __ store.ts

    ————————————————————————————–

    // features folder => user.ts

    import { createSlice } from “@reduxjs/toolkit”;
    import storage from “redux-persist/lib/storage”;
    import { persistReducer } from “redux-persist”;

    export const userSlice = createSlice({
    name: “user”,
    initialState: {
    fullname: “jack abc”,
    age: 23,
    gender: “male”,
    },
    reducers: {
    newUser: (state, { payload }) => {
    state.fullname = payload.fullname;
    state.age = payload.age;
    state.gender = payload.gender;
    },
    removeUser(state) {
    state.fullname = “”;
    state.age = 0;
    state.gender = “”;
    },
    },
    });

    const persistConfig = {
    key: “user”,
    storage,
    version: 1,
    };

    export const userReducer = persistReducer(persistConfig, userSlice.reducer);

    export default userSlice;

    ————————————————————————————–

    // reducer file (store root directory) => reducer.ts

    import { combineReducers } from “@reduxjs/toolkit”;

    import { userReducer } from “./features/user”;
    import { authReducer } from “./features/auth”;

    const rootReducer = combineReducers({
    auth: authReducer,
    user: userReducer,
    });

    //? by bottom code you can persist all reducers
    // import storage from “redux-persist/lib/storage”;
    // import { persistReducer } from “redux-persist”;
    // const persistConfig = {
    // key: “all”,
    // storage,
    // version: 1,
    // };
    // export default persistReducer(persistConfig, rootReducer);

    export default rootReducer;

    ————————————————————————————–

    // store file (store root directory) => store.ts

    import { configureStore } from “@reduxjs/toolkit”;
    import { persistStore } from “redux-persist”;

    import rootReducer from “./reducer”;

    // Create the store
    const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
    serializableCheck: false,
    }),
    });

    // Persist the store for redux persist
    export const persistor = persistStore(store);

    // Get the State type
    export type RootState = ReturnType;
    export type AppDispatch = typeof store.dispatch;

    export default store;

Leave a Reply