function removeTodos(index){
setTodos((todos) => todos.filter((_ , i) => i !== index()));
}
Introducci贸n a SolidJS
Los problemas que resuelve SolidJS
Instalaci贸n de SolidJS: usando un template para nuestra aplicaci贸n
Primitiva reactiva de SolidJS: signals
Primitiva reactiva de SolidJS: effect
Primitiva reactiva de SolidJS: memo
Quiz: Introducci贸n a SolidJS
Reactividad a profundidad
驴Qu茅 es la reactividad?
Crea tu propia libreria reactiva: MiniSolid
Signals aplicados a un proyecto
Effects aplicados a un proyecto
Crea mejores aplicaciones con signals derivados
Memos aplicados a un proyecto
Renderizado de un proyecto en SolidJS
Quiz: Reactividad a profundidad
Renderizado en Solid
ToDo App: usando reactividad y sistemas de renderizado en un proyecto
Implementando el Dark Mode a un proyecto
Renderizado Condicional
Renderizado de Listas
Manejo de Eventos
Quiz: Renderizado en Solid
Reactividad en Listas
Reactividad en Listas
Stores para optimizar renderizados
Como implementar Stores a un proyecto
Funci贸n Produce para usar sintaxis de Javascript
Quiz: Reactividad en Listas
Componentes
驴Qu茅 son componentes en SolidJS?
Usando Props para comunicaci贸n entre componentes de una aplicaci贸n
Manejando eventos en una aplicaci贸n SolidJS
Guarda el estado de una aplicaci贸n con LocalStorage
Deploy de la aplicaci贸n ToDo con Netlify
Comparte tu proyecto con la comunidad
Quiz: Componentes
You don't have access to this class
Keep learning! Join and start boosting your career
Solid provides a powerful tool called stores that allows us to handle complex data such as arrays, objects, maps and sets in a more efficient and ergonomic way. By changing our list of all from a signal to a store, we not only improve the performance of our application, but also simplify development by dealing directly with proxy data.
A store in Solid is a special primitive designed to handle complex data. Unlike signals, which are functions, stores work as proxies for the data they contain. This means that you can interact with them as you would with normal arrays or objects, but with the advantage that Solid handles reactivity and optimization internally, minimizing the need for global updates to the interface.
To use a store instead of a signal, start by importing the SolidJS Store primitive. Then, change the functions and properties that depend on the signal to work directly with the store. Here some basic steps in the process:
Defining the store:
import { createStore } from 'solid-js/store';
const [all, setAll] = createStore([]);
Use of proxies:Replaces the functions that treated the array as a signal, since todos
is now a proxy for a normal array.
Modification logic update:When adding or modifying items in the store, use the set
method of the stores, which allows you to specify exactly which index and array property you are modifying:
setAll(index => all.length, { text: newItem, completed: false });
Solid facilitates the change of state through specific functions within the stores. This eliminates the need to redefine or clone the entire array when changing a single state or property.
Changing the state of an element:Use a setter to modify specific properties:
setAll(index, 'completed', status => !status);
Editing content:When editing the text of a whole, use the setter to modify directly within the proxy array:
setAll(index, 'text', newText);
Modifying an entire list is expensive in terms of resources. Stores allow you to modify individual elements directly, which is more efficient.
Add elements:Add a new element to the end of the array without the need to recreate the entire array:
setAll(all.length, { text: newItem, completed: false });
Remove items:Uses methods like filter
to handle the removal simplifying the code and improving performance:
setAll(all => all.filter((_, idx) => idx !== indexToRemove));
All in all, stores provide us with a powerful tool for handling complex data, significantly improving reactivity and optimization in our Solid applications. While it may require a change in mindset compared to using signals, the benefits in performance and code clarity are remarkable.
Continue to explore this exciting technology and keep learning to hone your Solid development skills.
Contributions 1
Questions 0
function removeTodos(index){
setTodos((todos) => todos.filter((_ , i) => i !== index()));
}
Want to see more contributions, questions and answers from the community?