rejet
A state management that was inspired by Recoil
Highlight features
- Minimalism state management
- Can cancel async action dispatching
- Powerful computed states
- Can watch action dispatching or state changing
State
States can be read from any component. Components that read the value of state are implicitly subscribed to that state, so any state updates will result in a re-render of all components subscribed to that state:
import state select from 'rejet'; const textState = ; const TextInput = const text = ; return <input = />;;
Action
We can only change states inside an action
import state action select from 'rejet'; const textState = ;const changeTextAction = ; const TextInput = const text = ; return <input = = /> ;;
Computed State
A computed state represents derived state. Derived state is a transformation of state. You can think of derived state as the output of passing state to a pure function that modifies the given state in some way:
import state from 'rejet'; const textState = ;const charCountState = ;
Derived state is a powerful concept because it lets us build dynamic data that depends on other data. In the context of our todo list application, the following are considered derived state:
Filtered todo list: derived from the complete todo list by creating a new list that has certain items filtered out based on some criteria (such as filtering out items that are already completed). Todo list statistics: derived from the complete todo list by calculating useful attributes of the list, such as the total number of items in the list, the number of completed items, and the percentage of items that are completed. To implement a filtered todo list, we need to choose a set of filter criteria whose value can be saved in an atom. The filter options we'll use are: "Show All", "Show Completed", and "Show Uncompleted". The default value will be "Show All":
const todoListFilterState = ;
Using todoListFilterState and todoListState, we can build a filteredTodoListState computed state which derives a filtered list:
const filteredTodoListState = ;
The filteredTodoListState internally keeps track of two dependencies: todoListFilterState and todoListState so that it re-runs if either of those change. Displaying our filtered todoList is as simple as changing one line in the TodoList component:
{ // changed from todoListState to filteredTodoListState const todoList = ; return <> <TodoListStats /> <TodoListFilters /> <TodoItemCreator /> todoList </> ;}
Note the UI is the same as the todoListFilterState has a default of "Show All". In order to change the filter, we need to implement the TodoListFilters component:
const changeFilter = ; { const filter = ; const updateFilter = target: value ; ; return <> Filter: <select = => <option ="Show All">All</option> <option ="Show Completed">Completed</option> <option ="Show Uncompleted">Uncompleted</option> </select> </> ;}
With a few lines of code we've managed to implement filtering! We'll use the same concepts to implement the TodoListStats component.
We want to display the following stats:
Total number of todo items Total number of completed items Total number of uncompleted items Percentage of items completed While we could create a computed state for each of the stats, an easier approach would be to create one computed state that returns an object containing the data we need. We'll call this computed state todoListStatsState:
const todoListStatsState = ;
To read the value of todoListStatsState, we use select() once again:
{ const totalNum totalCompletedNum totalUncompletedNum percentCompleted = ; const formattedPercentCompleted = Math; return <ul> <li>Total items: totalNum</li> <li>Items completed: totalCompletedNum</li> <li>Items not completed: totalUncompletedNum</li> <li>Percent completed: formattedPercentCompleted</li> </ul> ;}