2023-12-07
3631
#react#redux
Taminoturoko Briggs
113568
Dec 7, 2023 ⋅ 12 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:

Handling File Uploads In Next.js Using UploadThing

Handling file uploads in Next.js using UploadThing

Manage file uploads in your Next.js app using UploadThing, a file upload tool to be used in full-stack TypeScript applications.

Jude Miracle
Jun 21, 2024 ⋅ 15 min read
Exploring Advanced Support For Vite 5 In Storybook 8

Exploring advanced support for Vite 5 in Storybook 8

Explore the latest updates in Storybook 8, focusing on its improved support for Vite 5 as a build tool.

Will Soares
Jun 20, 2024 ⋅ 5 min read
Using Next Js With React Suspense To Create A Loading Component

Using Next.js with Suspense to create a loading component

Next.js 13 introduced some new features like support for Suspense, a React feature that lets you delay displaying a component until the children have finished loading.

Suraj Vishwakarma
Jun 19, 2024 ⋅ 9 min read
Exploring Angular 18's Redirectcommand Class And Let Block

Exploring Angular 18’s RedirectCommand class and @let block

Angular’s latest update brings greater control over redirects and the ability to define and assign variables within the template.

Lewis Cianci
Jun 19, 2024 ⋅ 6 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