Giter VIP home page Giter VIP logo

redux-localstore's Introduction

localstorage-redux

Build Status Coverage Status

forthebadge forthebadge forthebadge

What does this library do ?

It allows a user to save/sync redux state as a whole or fragments of it to localstorage / any other generic storage a user deems fit.

Installation

yarn add localstorage-redux
or
npm install localstorage-redux

Usage

Check out the demo/src/index.js folder to see a bare bone implementation of the library

import { createStore } from "redux";
import { loadState, saveState } from "localstorage-redux/lib";

const storeTestName = "__REDUX__TEST__STORE__";

/***
 * a basic store solution if you 
 * implement your own store make sure to expose
* the getItem and setItem functions
*/

const storageMock = () => {
  let storage = {};

  return {
    setItem: (key, value) => {
      storage[key] = value;
    },
    getItem: key => {
      return key in storage ? storage[key] : null;
    }
  };
};

/**
 *
 * @param {array} state - state array to hold the todos
 * @param {object} action - holds the action meta data/ info
 */
function todos(state = [], action) {
  switch (action.type) {
    case "ADD_TODO":
      return state.concat([action.text]);
    default:
      return state;
  }
}
const storageModule = storageMock();
const store = createStore(todos, loadState(storageModule, storeTestName));
 saveState({
      store,
      storage: storageModule,
      storename: storeTestName
      });

How it works

loadState(storageModule: object | undefined, storename: string | "__REDUX__STORE__")

loadState takes:

    1. storageModule or if undefined defaults to localStorage.


    2. storename is either a predifined string or it defaults to "__REDUX__STORE__"

saveState({store, storage: object | undefined, storename: string | "__REDUX__STORE__", timer: milliseconds(eg: 3000) | 2000})

saveState takes:

    1. store - redux store


    2. storage - same as the storeModule in loadState


    3. storename - same as in loadState


    4. timer - number of milliseconds to delay for subsequent save calls after state changes in redux state. Throttles the save to storage functionality because of the expensive call to `JSON.stringify` 

Saving partial redux state

It makes sense not to save the whole state in redux but to save only pieces that are relevant and need to be persisted even beyond refresh.

import { createStore, combineReducers } from "redux";


    const reducers = combineReducers({
      todos
    });
    let newMockStorage = storageMock();
    store = createStore(reducers, loadState(newMockStorage, storeTestName));
    store.dispatch({
      type: "ADD_TODO",
      text: "Read the docs"
    });
    saveState({
      store,
      storage: newMockStorage,
      storename: storeTestName,
      items: ["non-todos-object"]
    });

in the above example the todos are not stored in localStorage since todos is not specified in the items array. If items is not given any value then the whole redux store is saved to localStorage

Scenarios where this may be useful

  1. Persisting the app theme colors set by a user eg: (dark mode or light mode or even persisting the primary / secondary colors of the app if they are to be changed dynamically based on the user preference)

Check the demo folder for the above implementation.

Getting the demo to run

  1. cd demo
  2. yarn - installs packages
  3. yarn start starts the app

redux-localstore's People

Contributors

tevinthuku avatar

Stargazers

Willies Wanjala avatar

Watchers

James Cloos avatar  avatar

Forkers

nehemiahlimo

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.