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:

When is low-code the right choice? Here’s how to decide

Not sure if low-code is right for your next project? This guide breaks down when to use it, when to avoid it, and how to make the right call.

Popoola Temitope
Jul 11, 2025 ⋅ 7 min read
Comparing AI App Builders — Firebase Studio vs. Lovable vs. Replit. LogRocket Article

Comparing AI app builders — Firebase Studio vs. Lovable vs. Replit

Compare Firebase Studio, Lovable, and Replit for AI-powered app building. Find the best tool for your project needs.

Emmanuel John
Jul 11, 2025 ⋅ 7 min read
Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Discover how to use Gemini CLI, Google’s new open-source AI agent that brings Gemini directly to your terminal.

Chizaram Ken
Jul 10, 2025 ⋅ 8 min read
React & TypeScript: 10 Patterns For Writing Better Code

React & TypeScript: 10 patterns for writing better code

This article explores several proven patterns for writing safer, cleaner, and more readable code in React and TypeScript.

Peter Aideloje
Jul 10, 2025 ⋅ 11 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