Hola, soy Luis y en esta ocasión les traigo otro nuevo post.
Redux se ha convertido en una de las bibliotecas más populares en desarrollo front-end desde que fue introducida por Dan Abramov y Andrew Clark en 2015.
La diseñaron como sucesora de Flux , con el apoyo de algunas herramientas de desarrollo y algunos conceptos más integrados en eso.
Flux es un nombre elegante para el patrón de observador modificado para admitir React. Tanto Flux como Redux consisten en conceptos similares como Store, Actions (eventos en la aplicación).
middleware como redux-thunk. Puede ser una función o una promesa para Redux.
Sin embargo, Redux es una única fuente de verdad con conceptos como inmutabilidad, que mejoran el rendimiento.
Es una de las principales razones por las que Redux domina la gestión de estado.
enappd.com.A pesar de sus ventajas, a algunos desarrolladores les ha resultado bastante difícil lidiar con Redux debido a la cantidad de código repetitivo introducido con él. Y la complejidad del código parece ser otra razón de la dificultad.
En este artículo, veremos cómo reducir el código repetitivo provocado por Acciones y Reductores usando Redux-Actions.
Úselo para maximizar la reutilización de código, colaborar en componentes independientes y crear aplicaciones que escalen.
Bit es compatible con Node, TypeScript, React, Vue, Angular y más.
Índice
¿Qué es React-Actions?
La abundancia de código estándar puede ser un desafío para leer y mantener cuando la aplicación crece con el tiempo. Esto puede ser una pesadilla para alguien que está adoptando React-Redux recientemente.
Como solución, Redux-Actions proporciona ayudantes en ambos manejos y crea acciones para trabajar con una FSA en Redux, lo que es más fácil para todos.
Ahora echemos un vistazo a algunos fragmentos de código de Redux y veamos cómo React-Actions reduce el código repetitivo, reduciendo así la complejidad del código de Redux.
Instalación de React-Actions
En primer lugar, debe instalar React Actions dentro de un proyecto React Redux.
npm install --save redux-actions reduce-reducer
O
yarn add redux-actions reduce-reducer
Después de instalar la biblioteca, debe importar el paquete dentro de su acción para jugar con Redux-Actions.
import createActions, handleActions, combineActions from 'redux-actions';
Acciones de refactorización
Ahora, consideremos un escenario en el que estamos tratando con datos de usuario a través de un flujo de Redux. Para ello, necesitamos crear un nuevo usuario. Entonces, necesitas enviar una acción llamada AddUser.
export const AddUser = (data) => ( type: ADD_USER, payload: data )
Con Redux-Action, esto se puede refactorizar a una sola línea como la que se muestra a continuación.
export const AddUser = createActions(ADD_USER);
Redux-Actions sigue un estándar llamado Flux Standard Action ( FSA ), que define cómo debería verse un objeto de acción y dónde podría tener propiedades como.
{
type:'TYPE',
payload:{},
error:false,
meta:{}
}
Por lo tanto, cuando pasa datos a AddUser acción, tomará los parámetros y creará una FSA objeto. Ahora, consideremos un escenario en el que la acción no toma ningún parámetro y solo devuelve un valor codificado.
Un ejemplo ideal de esto sería una acción utilizada para renderizar una ruleta de carga.
export const showLoader = () => ({
type:SHOW_LOADING,
payload:true
});
Esta acción en particular se puede refactorizar de la siguiente manera.
export const showLoader = createActions(SHOW_LOADING,() => true);
El createActions toma un segundo parámetro que acepta una función que debería devolver el valor predefinido / codificado, y en este caso, devolverá verdadero.
Finalmente, podemos refactorizar aún más el código creando un objeto creador de acción en lugar de funciones de acción individuales.
const actionCreator = createActions({
SHOW_LOADING:() => true,
HIDE_LOADING:() => false
},
ADD_USER,
UPDATE_USER,
DELETE_USER
);
El primer objeto corresponde a las acciones que devuelven un valor predefinido, y el resto del parámetro pueden ser acciones regulares que toman en tipo y carga útil. Este objeto podría destruirse para acceder a las acciones por separado.
Reductores de refactorización
Redux-Actions también proporciona una función API llamada handleActions que se puede utilizar para refactorizar el reductor de una aplicación redux. Consideremos la siguiente declaración de cambio en un reductor típico.
export default (state = initialState, action) => {
switch(action.type) {
case ADD_USER:
return {
...state,
users:state.users.concat(action.payload)
}
case DELETE_USER:
return {
...state,
users:deleteUse(state,payload)
}
}
});
La caja del interruptor anterior se puede dividir en funciones de acción separadas. La siguiente función maneja la acción para el addUser.
const addUser = handleActions (ADD_USER, (state, action) => {
return {
...state,
users: state.users.concat(action.payload)
}
}, initialState);
La declaración del interruptor reductor se puede reemplazar por reduceReducers función introducida por una biblioteca reductor-reductor, se puede reducir múltiples reductores en un solo reductor.
Luego, esta función se puede pasar a la función reductora de raíz de la siguiente manera.
export default reduceReducer(addUser,deleteUser,updateUser);
En conclusión, redux-actions con reduce-reducer puede simplificar el patrón redux reduciendo el código repetitivo usando sus funciones API como createActions, handleAction etc. Esto puede hacer que el código sea más fácil de entender y de mantener.
Puede encontrar más información sobre Redux-Action refiriéndose a este documento.
Gracias por tomarse el tiempo de leer esto. Me gustaría ver sus preguntas y comentarios sobre el tema en los comentarios a continuación.
Gracias por leer este post.
Añadir comentario