A selector represents a piece of derived 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.
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":
todoListState, we can build a
filteredTodoListState selector which derives a filtered list:
filteredTodoListState internally keeps track of two dependencies:
todoListState so that it re-runs if either of those change.
From a component's point of view, selectors can be read using the same hooks that are used to read atoms. However it's important to note that certain hooks only work with writable state (i.e
useRecoilState()). All atoms are writable state, but only some selectors are considered writable state (selectors that have both a
setproperty). See the Core Concepts page for more information on this topic.
Displaying our filtered todoList is as simple as changing one line in the
Note the UI is showing every todo because
todoListFilterState was given a default value of
"Show All". In order to change the filter, we need to implement the
With a few lines of code we've managed to implement filtering! We'll use the same concepts to implement the
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 selector for each of the stats, an easier approach would be to create one selector that returns an object containing the data we need. We'll call this selector
To read the value of
todoListStatsState, we use
useRecoilValue() once again:
To summarize, we've created a todo list app that meets all of our requirements:
- Add todo items
- Edit todo items
- Delete todo items
- Filter todo items
- Display useful stats