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.
npm install react-air-stateThis 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.
``npm`
npm install react-air-state
`ts
/ File counterState.ts /
import {airState} from "react-air-state"
export const counterState = airState(0)
`
`tsx
/ File Counter.tsx /
import {counterState} from "./counterState"
const CounterComponent = () => {
const counter = counterState.useValue()
const increase = () => {
counterState.dispatch(prevState => prevState + 1)
}
return (
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
Methods
$3
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$3
The hook to extract the current state$3
The hook that extracts the state calculated by the function (selector) passed to it$3
Function for creating a typed selector#### Example with
and createSelectortsx
import {airState} from "react-air-state"export const userState = airState({
name: "Smith",
token: "token"
})
const selectToken = userState.createSelector((user) => user.token)
const Component = () => {
const token = userState.useSelect(selectToken);
/ ... /
}
`$3
This method for passing your function to subscribe to a state change$3
This method allows you to get the current stateOptions
$3
Set the key for localStorage so that your state is saved in itcombineAirState
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
$3
tsx
import {airState, combineAirState} from "react-air-state"const postsState = airState([
{
id: 1,
title: 'Post 1'
},
{
id: 2,
title: 'Post 2'
}
])
const commentsState = airState([
{
id: 1,
postId: 1,
message: 'Comment 1'
},
{
id: 2,
postId: 1,
message: 'Comment 2'
}
])
const normalizePostsState = combineAirState([postsState, commentsState] as const, (posts, comments) => {
return posts.map(post => ({
...post,
comments: comments.filter(comment => comment.postId === post.id)
}))
})
const PostsComponent = () => {
const posts = normalizePostsState.useValue()
return (
{posts.map(post => (
{post.title}
Comment count: {post.comments.length}
))}
)
}
`Methods
creates an object with the same methods as airState, except for the methods dispatch, useSelect, createSelector`