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:

Exploring The Top Rust Web Frameworks

Exploring the top Rust web frameworks

In this article, we’ll explore the best Rust frameworks for web development, including Actix Web, Rocket, Axum, warp, Leptos, Cot, and Loco.

Abiodun Solomon
May 28, 2025 ⋅ 11 min read
How To Use The CSS Cursor Property

How to use the CSS cursor property

A single line of CSS can change how users feel about your UI. Learn how to leverage the cursor property to signal intent, improve interaction flow, and elevate accessibility.

Chizaram Ken
May 28, 2025 ⋅ 6 min read
Build TypeScript App Vite

How to build a React + TypeScript app with Vite

We explore the benefits of building an app with React, TypeScript, and Vite, and compare its performance to the same app built with CRA.

Clara Ekekenta
May 28, 2025 ⋅ 7 min read

How to use Claude to build a web app

Learn how to build a weather app using Claude, from setting up infrastructure to creating a functional UI that displays city-based forecasts.

Andrew Evans
May 28, 2025 ⋅ 8 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