Note

This is the only page in my app that is not responsive. It is just a demo.

Introduction

This program tries to replicate the functionality of Redux. It combines the observer pattern with useState.

Features

• Works with Next.js with no wrapper and and no prop drilling
• Stores, slices, selectors, and event emitters
• Equality functions to prevent unnecessary renders
• Components subscribe to events/state updates and decide if they want to render based on the information they receive
• Store is available in React DevTools

Demo Information

• The above features are shown in this demo
• Mock HTTP calls (using Promises) in server components populate the state inciient components

How to use

• The store in in react DevTools and is called StoreClientWrapper
• Subscribe and unsubscribe from events and emit the events (see Component Tree 4).
• Check the DevTools console to see the results
• Add books, games, etc and then navigate away from the page. When you navigate back the data should still be on the page
• Hard refreshes delete the data as it is not stored in any database

Source code

• Find out more: see the source code on GitHub
• The comments explain how it works