https://react-recoiljs-typescript.vercel.app/
npm install
npm run start
We have 3 differents states groups
export const filterState = atom({
key: "filterState",
default: [] as string[],
});
// List of all possible filter labels
export const labelListState = atom({
key: "labelListState",
default: [
{ name: "High Priority", color: "red" },
{ name: "Medium Priority", color: "yellow" },
{ name: "Low Priority", color: "blue" },
] as ILabel[],
});
// A selector to get a unique filter label by Name
export const getLabelStateByName = selectorFamily({
key: "getLabelState",
get:
(labelName: string) =>
({ get }) => {
const labels = get(labelListState);
const foundLabel = labels.filter((label) => label.name === labelName);
return foundLabel[0]; // label or undefined
},
});
// Where all todo are saved
export const todoListState = atom({
key: "todoListState",
default: [] as ITodoItem[],
});
// A selector to get filterd todo items
export const todoListStateFiltered = selector({
key: "todoListStateFiltered",
get: ({ get }) => {
const todoListStateValue = get(todoListState);
const filterStateValue = get(filterState);
if (filterStateValue.length) {
return todoListStateValue.filter((todoItem) =>
filterStateValue.includes(todoItem.label)
);
}
return todoListStateValue;
},
});