Saltar al contenido

Cómo cruzar los valores de los estados

Como hemos aprendido, la tienda Redux mantiene el objeto de estado global, que combina los datos de los diferentes reductores y lo hace disponible para todos los componentes de la aplicación.

El acceso a los datos de los estados cruzados puede ser necesario a veces porque tenemos que manipular valores de múltiples estados a la vez. Por ejemplo, puede que necesitemos acceder a los datos de los estudiantes en el componente de maestros donde cada maestro puede asignar a la clase de estudiantes.

Cómo cruzar los valores de los estados
Cómo cruzar los valores de los estados

Nota : Los datos procedentes de diferentes reductores pueden o no ser útiles en última instancia, por lo que tenemos que filtrarlos en base a nuestros requisitos funcionales.

Para ello, podemos hacer uso de la reselección de la biblioteca, que nos permite almacenar los valores de estado mínimos posibles.

Los selectores son de naturaleza eficiente y compatible, por lo que pueden ser útiles para otros como valor de entrada. Ahora, instalemos la biblioteca de reselección.

1npm install --save reselect

powerhell

Podemos crear el nuevo selector usando el método createSelector(), que importamos así.

1import{ createSelector }de$0027reselect$0027;

jsx

La sintaxis básica de la reselección debería ser así.

12/// Basic selectorconstselector_name=(state)=> state.parent.key_value

js

Como pueden ver en la sintaxis, podemos acceder al valor de estado específico usando el nombre clave específico que vamos a consumir en el componente.

Entonces podemos crear la función selectora que acepta el primer argumento como un nombre de selector, y otro argumento es una función que manipula el valor de estado y devuelve los valores actualizados de la misma manera.

12345678// Basic selectorconstselector_name=(state)=> state.parent.key_value// Reselect functionexportconst function_name =createSelector([ selector_name ],(func)=> reurn_anything)

js

Aquí, la función de reselección acepta el nombre del selector como primer argumento, y después el valor de estado se modificará en la función de manera que obtendremos los valores requeridos en el componente en lugar del objeto de estado completo.

Por ejemplo, si queremos crear el selector para tres objetos diferentes, como estudiantes, profesores y empleados, entonces el selector y las funciones del selector se verán así.

123456789101112131415161718192021constgetStudentsRecords=(state)=> state.students.data;constgetEmployeesRecords=(state)=> state.employees.data;constgetTeachersRecords=(state)=> state.teachers. data;// Los estudiantes reseleccionan functionexportconst getStudents =createSelector([getStudentsRecords],data= > data);// Los empleados reseleccionan functionexportconst getEmployees =createSelector([getEmployeesRecords],data= ]*; datos);// Profesores reseleccionar functionexportconst getTeachers =createSelector([getTeachersRecords],data=> data);

js

Aquí, inicialmente, hemos creado tres selectores diferentes y hemos usado todos esos selectores como un argumento junto con la función de reselección de esta manera.

12345/// Los estudiantes reseleccionan functionexportconst getStudents =createSelector([getStudentsRecords],// selector como primer argumentdata=> data);

js

Como pueden ver en el ejemplo anterior, tenemos un selector llamado getStudentsRecords, que representa los datos de los estudiantes; por lo tanto, sólo permitimos que se seleccionen los registros de los estudiantes del objeto de estado completo.

Ahora, una vez que usemos el selector getStudents, obtendremos los datos completos del objeto estudiante del objeto de estado global.