What is recoiljs

Fb took a peek at react’s new state management framework. According to the official website, it is small and more Reactish. The most important thing is not to break code-splitting. So let’s talk a little bit about how to get started.

Both Atoms and Selectors

Atoms, as the name implies, are atomized, providing a state as follows, setting unique keys and default values,

const todoListState = atom({
  key: 'todoListState',
  default: [],
});
Copy the code

When we use it in the app, according to the Todo List project on the official website, there are three ways to use it

  1. Just use its valueconst todoList = useRecoilValue(todoListState);As shown in the following
{todoList.map((todoItem) => (
        <TodoItem item={todoItem} />
      ))}
Copy the code
  1. I just want to update the valueconst setTodoList = useSetRecoilState(todoListState);As shown in the following
const addItem = () => {
    setTodoList((oldTodoList) => [
      ...oldTodoList,
      {
        id: getId(),
        text: inputValue,
        isComplete: false,}]); };Copy the code
  1. You want to get values and you can update values at the same timeconst [todoList, setTodoList] = useRecoilState(todoListState);React useState, where todolist is the state value. SetTodoList also sets the value directly. Note the difference between setTodoList and useSetRecoilState.

Selectors

A selector represents a piece of derived state

The above is an explanation from the official website, which can be considered as a derived state, somewhat like a Reducer, which supports fetching values from state and other selectors. If you look at the todo List project on the official website, you can see that there’s also a key, which is returned by the get function, where the get method gets the value of another state or selector, The following code takes the values of all the lists and the values of the filter criteria to return lists that match the filter criteria

const todoListFilterState = atom({
  key: 'todoListFilterState',
  default: 'Show All'}); const filteredTodoListState = selector({ key:'filteredTodoListState',
  get: ({get}) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {
      case 'Show Completed':
        return list.filter((item) => item.isComplete);
      case 'Show Uncompleted':
        returnlist.filter((item) => ! item.isComplete); default:returnlist; }}});Copy the code

And the selector also supports a set operation, which is kind of like how we convert degrees to Degrees Fahrenheit, and when we assign a selector to degrees Celsius, we also update tempFahrenheit,

const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
});

const tempCelcius = selector({
  key: 'tempCelcius',
  get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
  set: ({set}, newValue) => set(tempFahrenheit, (newValue * 9) / 5 + 32),
});
Copy the code

After running the demo according to the official website for one time, the basic summary is these. I will write another in-depth article later when I have time for in-depth study