Comprensión y en _ Redux Store Actions Reducers React

En una aplicación impulsada por Redux, la arquitectura gira en torno a tres conceptos principales: Redux store, actions y reducers. Profundicemos en cada uno de estos conceptos y veamos cómo funcionan juntos.

Redux Store

Redux store es una única fuente de verdad que contiene el estado completo de su aplicación. Es esencialmente un objeto JavaScript que contiene datos que representan todo el estado de la aplicación. Creas store usando la createStore función de la biblioteca Redux.

Actions

Actions son objetos simples de JavaScript que describen algo que sucedió en la aplicación. Llevan un type campo que indica el tipo de acción que se está realizando y también se pueden incluir datos adicionales. Actions se crean utilizando creadores de acciones, que son funciones que devuelven objetos de acción. Por ejemplo:

// Action Types  
const ADD_TODO = 'ADD_TODO';  
  
// Action Creator  
const addTodo =(text) => {  
  return {  
    type: ADD_TODO,  
    payload: text  
  };  
};  

Reducers

Reducers especifique cómo cambia el estado de la aplicación en respuesta a actions. Un reductor es una función pura que toma el estado actual y una acción como argumentos y devuelve un nuevo estado. Reducers se combinan en un único reductor de raíz usando la combineReducers función. He aquí un ejemplo sencillo:

// Reducer  
const todosReducer =(state = [], action) => {  
  switch(action.type) {  
    case ADD_TODO:  
      return [...state, action.payload];  
    default:  
      return state;  
  }  
};  
  
// Combine Reducers  
const rootReducer = combineReducers({  
  todos: todosReducer,  
  // ...other reducers  
});  

Trabajando juntos

Cuando envías una acción usando la dispatch función, Redux reenvía la acción a todos los archivos reducers. Cada reductor comprueba si el tipo de acción coincide con el suyo y actualiza la parte relevante del estado en consecuencia. Luego, el estado actualizado se almacena en Redux store y todos los componentes conectados se vuelven a representar según el nuevo estado.

Escenario de ejemplo

Imagine una aplicación de lista de tareas pendientes. Cuando un usuario agrega una nueva tarea pendiente, se envía una acción con el tipo ADD_TODO y el texto de la tarea pendiente como carga útil. El reductor de todos recibe esta acción, agrega la nueva tarea al estado y devuelve el estado actualizado.

Conclusión

Comprender cómo interactúan Redux store, actions y reducers es crucial para una gestión estatal eficaz. Esta arquitectura garantiza una clara separación de preocupaciones y facilita la gestión de estados complejos de aplicaciones. A medida que continúe desarrollándose con Redux, estos conceptos formarán la base de su estrategia de gestión estatal.