React Air State

This library is designed to create a simple state outside react components. The state is reactive and can be obtained using the built-in useValue hook.

The library does not use the context and provider, so connecting and using it becomes very simple.

Warning! This library has not been used in a real project, use it at your own risk. I will be glad to receive feedback.

Installation

1npm install react-air-state

Using

1/* File counterState.ts */
2import {airState} from "react-air-state"
3
4export const counterState = airState(0)

1/* File Counter.tsx */
2import {counterState} from "./counterState"
3
4const CounterComponent = () => {
5    const counter = counterState.useValue()
6
7    const increase = () => {
8        counterState.dispatch(prevState => prevState + 1)
9    }
10    
11    return (
12        <div>
13            <h1>{counter}</h1>
14            
15            <button onClick={increase}>Increase</button>
16        </div>
17    )
18}

airState

Factory Function that creates an object with the required set of methods. It takes 1 argument, which is the default state value. If there is no default value, you must explicitly specify the future state type const valueState = airState<T>(defaultValue?: T, options?: AirStateOptions)

Methods

dispatch

This method allows you to update the state to a different value and start re-visualization. You can pass the new state directly or a function that calculates it from the previous state

useValue

The hook to extract the current state

useSelect

The hook that extracts the state calculated by the function (selector) passed to it

createSelector

Function for creating a typed selector

Example with useSelect and createSelector

1import {airState} from "react-air-state"
2
3export const userState = airState({
4    name: "Smith",
5    token: "token"
6})
7
8const selectToken = userState.createSelector((user) => user.token)
9
10const Component = () => {
11    const token = userState.useSelect(selectToken);
12    
13    /* ... */
14}

subscribe

This method for passing your function to subscribe to a state change

getValue

This method allows you to get the current state

Options

localStorageKey?: string

Set the key for localStorage so that your state is saved in it

combineAirState

Factory Function for combining different states into one. It takes 2 arguments:

• array of states
• function that calculates a new state based on the transmitted states

Example

1import {airState, combineAirState} from "react-air-state"
2
3const postsState = airState([
4    {
5        id: 1,
6        title: 'Post 1'
7    },
8    {
9        id: 2,
10        title: 'Post 2'
11    }
12])
13
14const commentsState = airState([
15    {
16        id: 1,
17        postId: 1,
18        message: 'Comment 1'
19    },
20    {
21        id: 2,
22        postId: 1,
23        message: 'Comment 2'
24    }
25])
26
27const normalizePostsState = combineAirState([postsState, commentsState], (posts, comments) => {
28    return posts.map(post => ({
29        ...post,
30        comments: comments.filter(comment => comment.postId === post.id)
31    }))
32})
33
34const PostsComponent = () => {
35    const posts = normalizePostsState.useValue()
36    
37    return (
38        <div>
39            {posts.map(post => (
40                <div key={post.id}>
41                    <h3>{post.title}</h3>
42                    <p>Comment count: {post.comments.length}</p>
43                </div>
44            ))}
45        </div>
46    )
47}

Methods

combineAirState creates an object with the same methods as airState, except for the methods dispatch, useSelect, createSelector