Utilities to transform data with unique identifiers to and from a normalized data store. All data is treated as immutable, new data structures are returned when updating.
Often when dealing with data in a single-page-application (SPA) it is useful to represent collections of resources in a way that is both easy to query and to update.
With normal-store
you can convert the resources served by your backend into a format similar to an indexed database.
const resources = [{ id: 'a' }, { id: 'b' }];
const normalized = normalize(resources); // { allKeys: ['a', 'b'], byKey: { a: { id: 'a' }, b: { id: 'b' } }}
const denormalized = denormalize(normalized); // [{ id: 'a' }, { id: 'b' }]
import axios from 'axios';
import { normalize, getOne, patchOne, removeOne } from 'normal-store';
const products = await axios.get('/products').then(res => res.data);
let productStore = normalize(products);
const decrementStock = (productID) => {
productStore = patchOne(productStore, productID, ({ stock }) => ({ stock: stock - 1 }));
};
const removeProduct = (productID) => {
productStore = removeOne(productStore, productID);
};
To use normal-store
, install it as a dependency:
# If you use npm:
npm install normal-store
# Or if you use Yarn:
yarn add normal-store
This assumes that you’re using a package manager such as npm.