Forem: Igor Petrovic

Simplest way to persist redux state to localStorage

Igor Petrovic — Wed, 22 Sep 2021 09:07:46 +0000

For a next.js web app, I needed to persist the redux state to the browser's localStorage. In this article, I assume you already know how to setup redux in a next.js app.

Why should I persist the state ?

In this project, there is no database or user session. But still, the user should be able to save and resume its work on each visit to the app.

Demo app

It's a simple ToDo app to demonstrate this technic. You can check it on stackbitz.com here
Todo app stackblitz

Let's see the code

What we need first is two function to serialize and deserialize redux state.

app/browser-storage.ts

const KEY = "redux";
export function loadState() {
  try {
    const serializedState = localStorage.getItem(KEY);
    if (!serializedState) return undefined;
    return JSON.parse(serializedState);
  } catch (e) {
    return undefined;
  }
}

export async function saveState(state: any) {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem(KEY, serializedState);
  } catch (e) {
    // Ignore
  }
}

Then in pages/_app.tsx we subscribe to the store so we can save it each time a change happens.

pages/_app.tsx

import "tailwindcss/tailwind.css";
import type { AppProps } from "next/app";
import { Provider } from "react-redux";
import { saveState } from "app/browser-storage";
import { debounce } from "debounce";
import { store } from "app/store";

// here we subscribe to the store changes
store.subscribe(
  // we use debounce to save the state once each 800ms
  // for better performances in case multiple changes occur in a short time
  debounce(() => {
    saveState(store.getState());
  }, 800)
);

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}
export default MyApp;

The last part is how to restore the saved state when the user comes back. This is done in the store configuration.
We use reduxjs/toolkit configureStore and it's preloadedState configuration property.

app/store.ts

import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";

import todosReducer from "./feature/todo";
import { loadState } from "./browser-storage";

const reducers = combineReducers({
  todos: todosReducer,
});

export const store = configureStore({
  devTools: true,
  reducer: reducers,
  // here we restore the previously persisted state
  preloadedState: loadState(),
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

Cons

Using localStorage to persist app's state could impact its performance especially if you have a large state.
localStorage is not a bulletproof solution. If the user resets its browser cache app state is lost.

Github

The code is available here github

Notes

No relative imports

You probably noticed that my imports don't use relative paths like ../app/store but app/store this is done by configuring your tsconfig.json with compilerOptions baseUrl.

{
  "compilerOptions": {
    "baseUrl": "."
  },
}

Understanding next.js routing

Igor Petrovic — Thu, 09 Sep 2021 08:13:52 +0000

This article is a quick introduction to next.js routing where I explain the steps I took to understand it.

When you first create a NEXT.js app with



npx create-next-app

The file structure looks like this:

the pages folder contains the page which will be rendered.

Let's add a simple page contact.js

contact.js



export default function Contact() {
    return (
        <div>
            <h1>Contact page</h1>
        </div>
    )
}

open http://localhost:3000/contact
and you should see your page title

Creating a large number of pages manually becomes quickly cumbersome. Fortunately NEXT.js provides dynamic routes.

Dynamic Routes

A dynamic route is basically a javascript file under pages/ folder with special characters in its name.

basis examples

[id].js
[slug].js
[user_id].js
[name].js

catch all examples

[...id].js
[...slug].js
[...user_id].js
[...name].js

Let's create a dynamic route.

[slug].js



export default function DynamicPage() {
  return (
    <div>
      <p>dynamic page</p>
    </div>
  );
}

export async function getStaticPaths() {
  const posts = ["post/a", "post/b"];
  const paths = posts.map((post) => ({
    params: { slug: post },
  }));

  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}

When you navigate to this page you get a 404 error page.

Seems legit since the folder structure pages/[slug].js tells next.js that the path to these pages is at the root of the site. Something like /my-page should work. right ?

Let's navigate to /a. And then you get this error.



Error: getStaticPaths was added without a getStaticProps in /[slug]. Without getStaticProps, getStaticPaths does nothing

reproduction repo

Let's add a getStaticProps

[slug].js



export default function DynamicPage(props) {
  return (
    <div>
      <p>dynamic page</p>
      <p>{props.message}</p>
    </div>
  );
}

export async function getStaticProps(context) {
  return {
    props: { message: "dynamic page part 2" }, // will be passed to the page component as props
  };
}

export async function getStaticPaths() {
  const posts = ["post/a", "post/b"];
  const paths = posts.map((post) => ({
    params: { slug: post },
  }));

  return { paths, fallback: false };
}

The error is gone but the page is still not found.

reproduction repo

Fix: [slug].js

You need to add the page a in getStaticPaths

[slug].js



export async function getStaticPaths() {
  const posts = ["post/a", "post/b", "a"];
  const paths = posts.map((post) => ({
    params: { slug: post },
  }));

  return { paths, fallback: false };
}

And it works

But /post/a is still not found.

Fix: /post/a

Remember that next.js routing is based on the folder and files structure. For /post/a to work we need to create one of these files:

pages/post/a.js
pages/post/[slug].js
pages/post/[id].js

The examples use slug and id but you can actually use any name since next.js use file structure to map the url path.

This file structure tells next.js to render pages if an http client requests one of the following path:

/a
/post/a
/post/b
/post/c
/post/d
...

Any path starting with /post/ becomes a valid path.

/post/a path will be rendered using pages/post/a.js
/post/<any> path will be rendered using pages/post/[slug].js

At this point, in pages/[slug].js paths post/a, post/b become irrelevant. We can delete them.

reproduction repo

Let's assume you have only two posts `a` and `b`

You don't want to render a page for non existing posts. To achieve this, you need to add getStaticPaths AND getStaticProps to file pages/post/[slug].js

pages/post/[slug].js



export default function DynamicPage(props) {
  return (
    <div>
      <p>dynamic page </p>
    </div>
  );
}
export async function getStaticProps(context) {
  return {
    props: { message: "some post" }, 
  };
}

export async function getStaticPaths() {
  const posts = ["a", "b"]; // <= the magic happens here
  const paths = posts.map((post) => ({
    params: { slug: post },
  }));

  return { paths, fallback: false };
}

This limits the valid url paths to:

/post/a
/post/b

reproduction repo

IMPORTANT

When you use getStaticPaths the paths params must match the filename.

This will throw an error.

Error



Error: A required parameter (id) was not provided as a string in getStaticPaths for /post/[id]

documentation

official doc

Forem: Igor Petrovic

Simplest way to persist redux state to localStorage

Why should I persist the state ?

Demo app

Let's see the code

Cons

Github

Notes

Understanding next.js routing

Dynamic Routes

Fix: [slug].js

Fix: /post/a

Let's assume you have only two posts a and b

IMPORTANT

documentation

Let's assume you have only two posts `a` and `b`