Reduxie

Description

Asynchronous Redux state initialization and offline caching using the Dexie IndexedDB API wrapper.

Purpose

Reduxie solves the problem of efficient state persistence for your web application. Its lightweight developer experience enhances the Redux store to automatically cache state updates without blocking the main thread. This is particularly synergistic with progressive web apps utilizing service workers for a completely offline experience.

TypeScript

Reduxie is built in TypeScript and includes type files!

Install

npm install reduxie

Use

Import statement:
import Reduxie from 'reduxie';

Wrap your reducers by passing the combined reducers to Reduxie's OuterReducer: Reduxie.OuterReducer(reducers)

store.js

 
const configs = {throttleTime: 500, deleteCount: 20};
 
const store = createStore(
  Reduxie.OuterReducer(reducers),
  composeWithDevTools(applyMiddleware(thunk, Reduxie.Middleware('dbname', configs)))
);

The config parameter is optional and specifies a throttleTime for caching throttle frequency (ms) and deleteCount for cache storage limit. For an application with large store objects we advise smaller storage limits.

Implement the state fetch by adding Reduxie.GetReduxieState(dbname, dispatch) to the component where you would like the fetch to originate from (typically your app's landing page container).

Function should be called from React's componentDidMount class method (or useEffect for functional components utilizing hooks):

ReactComponent.js

//...
 
const mapDispatchToProps = (dispatch) => ({
  getIDBState: Reduxie.GetReduxieState('dbname', dispatch),
});
 
const ReactFunctionalComponent = (props) => {
  React.useEffect(props.getIDBState, []);
 
  return (
  //...Display elements
  )
}

How It Works

Reduxie will cache your state to IndexedDB on every state update by using a Redux middleware function specific to your app.

To retrieve your state use the Reduxie GetReduxieState method parametrized by your Redux dispatch from the connected mapDispatchToProps function. This will return a function to be called from your React app's ComponentDidMount (useEffect) lifecycle methods.