React Structured State

About

If we use react state in react-hooks, code tends to be long and compilicated for updating data-structure.

This package make your code simplly for update data-structure state.

This package support following data structure.

• Array
• Queue
• Set
• Map

Install

$ npm install react-structured-state

Demo App

https://react-structured-state.web.app

Source code of Demo App is here

How to use

Define

with normal(react hooks) state

import { useArray } from 'react-structured-state';

const App = (): JSX.Element => {
  const [arr, actionArr] = useArray<number>([1, 2, 3]);
  return (
    ...
  )
}

with recoil state

import { atom } from 'recoil';
import { useRecoilArray } from 'react-structured-state';

export const arrayState = atom({
  key: 'arrayState',
  default: [1, 2, 3],
});

const App = (): JSX.Element => {
  const [arr, actionArr] = useRecoilArray<number>(arrayState);
  return (
    ...
  )
}

Use Case

push 10 to back

// Before
setArr((oldarr) => [...oldarr, 10]);

// After
actionArr.pushBack(10);

double all elements

// Before
setArr((oldarr) => oldarr.map((e) => e * 2));

// After
actionArr.map((e) => e * 2);

Design of package

useArray/useRecoilArray/useQueue/useRecoilQueue return two values.

First value is used for view data.

Second value is object of action methods used for changing value.

API

In this sction, T mean type of container.

Array

Define action by following.

// with normal state
const [arr, actionArr] = useArray<number>([1, 2, 3]);

// with recoil state
const [arr, actionArr] = useRecoilArray<number>(arrayState);

In this case, methods of actionArr are following.

| method | action | args | args(optional) | default | | ----------- | ------------------------------------ | ------------------------- | --------------------------------- | --------------- | | setState | basic setState | T[] | | | | pushBack | add value(s) on back | val: T | ...vals: T[] | none | | pushFront | add value(s) on front | val: T, | ...vals: T[] | none | | insert | insert value | idx: number, val: T | ...vals: T[] | none | | popBack | remove value(s) on back | | count: number | 1 | | popFront | remove value(s) on front | | count: number | 1 | | concatBack | add elements of array on back | vals: T[] | | | | concatFront | add elements of array on front | vals: T[] | | | | sort | sort with callback | | fn: (vals: T[]) => T[] | (a, b) => a - b | | reverse | reverse elements | | | | | slice | update values with slice() | | start:number, end:number | 0, length | | splice | update values with splice() | start:number | deleteCount: number, ...vals: T[] | none, none | | filter | update values with filter() | fn:(vals: T[]) => boolean | | | | map | update values with map() | fn:(vals: T[]) => T[] | | | | fill | update values with fill() | val: T | start: number, end:number | 0, length | | chain | update vlues with array method chain | fn: (vals:T[]) => T[] | | | | set | set value on specified index | idx:number, val: T | | | | erase | erase element by specified value | val:T | | | | clear | clear all elements | | | |

Queue

Actually, Queue implementation in this library is alias of Array methods. So you can use useArray like quque.

But if you use useQueue, you can only use few methods. So you can write code that easy to understand (by expressly Queue).

Define action by following.

// actual type of state is Array

// with normal state
const [que, actionQue] = useQueue<number>([1, 2, 3]);

// with recoil state
const [que, actionQue] = useRecoilQueue<number>(queueState);

In this case, methods of actionQue are following.

| method | action | args | args(optional) | default | | -------- | ----------------------------- | --------- | -------------- | ------- | | setState | basic setState | T[] | | | | push | add value(s) on back | val: T | ...vals: T[] | none | | pop | remove value(s) on front | | count: number | 1 | | concat | add elements of array on back | vals: T[] | | | | clear | clear all elements | | | |

Set (HashSet)

// with normal state
const [st, actionSt] = useSet<number>([1, 2, 3]);

// with recoil state
const [st, actionSt] = useRecoilSet<number>(stState);

In this case, methods of actionSt are following.

| method | action | args | args(optional) | default | | -------- | -------------- | ------ | -------------- | ------- | | setState | basic setState | Set | | | | add | add key(s) | val: T | ...vals: T[] | none | | delete | delete key | val:T | | | | clear | clear set | | | |

Map (HashMap)

// with normal state
const [mp, actionMp] = useMap<string, number>([['a', 1]]);

// with recoil state
const [mp, actionMp] = useRecoilMap<string, number>(mpState);

In this case, methods of actionSt are following.

TK means type of key, TV means type of value.

| method | action | args | args(optional) | default | | -------- | --------------------- | ---------------- | -------------- | ------- | | setState | basic setState | Map<TK,TV> | | | | set | add or update key/val | key: TK, val: TV | | | | delete | delete key/val | key:TK | | | | clear | clear all key/val | | | |