javascript - create - ¿Cuándo debo agregar Redux a una aplicación React?
reducer redux (6)
Actualmente estoy aprendiendo React y estoy tratando de descubrir cómo usarlo con Redux para crear una aplicación móvil. Estoy un poco confundido sobre cómo los dos están relacionados / utilizables juntos. Por ejemplo, completé este tutorial en React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript , pero ahora quiero jugar agregando algunos reductores / acciones a esa aplicación y No estoy seguro de dónde encajarían con lo que ya he hecho.
Cuando escribimos la aplicación, necesitamos administrar el estado de la aplicación. El React gestiona los estados localmente dentro del componente si necesitamos compartir los estados entre los componentes, podemos usar accesorios o devoluciones de llamada.
Pero a medida que la aplicación crece, se hace difícil administrar estados y transformaciones de estado. Las transformaciones de estado y estado deben rastrearse adecuadamente para depurar las aplicaciones.
Redux es un contenedor de estado predecible para aplicaciones JavaScript que gestiona transformaciones de estado y estado y a menudo se usa con React,
El concepto de redux puede explicarse en la siguiente imagen.
Cuando el usuario desencadena una acción cuando el usuario interactúa con el componente y se envía una acción para almacenar, el reductor en la tienda acepta la acción y actualiza el estado de la aplicación y se almacena en la variable global inmutable de la aplicación cuando hay una actualización en la tienda se actualizará el componente de vista correspondiente suscrito al estado.
Dado que el estado se gestiona globalmente y con redux es más fácil de mantener.
Descubrí que la ruta ideal para agregar Redux a una aplicación / pila es esperar hasta que usted / aplicación / equipo sienta los dolores que resuelve.
Una vez que comience a ver largas cadenas de
props
que se acumulan y transmiten a través de múltiples niveles de componentes o que se encuentre orquestando manipulaciones / lecturas de estado complejas, eso podría ser una señal de que su aplicación puede beneficiarse al presentar Redux et al.
Recomiendo tomar una aplicación que ya haya creado con "solo React" y ver cómo Redux podría encajar en ella. Vea si puede introducirlo con gracia al extraer una pieza de estado o un conjunto de "acciones" a la vez. Refactorice hacia él, sin quedar atrapado en una gran reescritura de su aplicación. Si todavía tiene problemas para ver dónde podría agregar valor, eso podría ser una señal de que su aplicación no es lo suficientemente grande o compleja como para merecer algo como Redux en la parte superior de React.
Si aún no lo ha encontrado, Dan (respondió anteriormente) tiene una gran serie de videos cortos que recorre Redux en un nivel más fundamental. Recomiendo pasar un poco de tiempo absorbiendo piezas: https://egghead.io/series/getting-started-with-redux
Redux también tiene algunos documentos geniales. Especialmente explicando mucho del "por qué" como http://redux.js.org/docs/introduction/ThreePrinciples.html
En primer lugar, no necesita agregar
Redux
a su aplicación si no lo necesita.
Simple, ¡así que no te obligues a incluirlo en tu proyecto si no lo necesitas en absoluto!
Pero eso no significa que Redux no sea bueno, es realmente útil en aplicaciones grandes, así que sigue leyendo ...
Redux es una administración de estado para su aplicación React, piense en
Redux
como una tienda local que rastrea su estado a medida que avanza, puede acceder al estado en cualquier página y ruta que desee, también compare con Flux, solo tiene una tienda, significa una fuente de verdad ...
Mire esta imagen para comprender lo que Redux hace primero de un vistazo:
También así es como se presenta Redux:
Redux es un contenedor de estado predecible para aplicaciones JavaScript.
Le ayuda a escribir aplicaciones que se comportan de manera consistente, se ejecutan en diferentes entornos (cliente, servidor y nativo) y son fáciles de probar. Además de eso, proporciona una excelente experiencia de desarrollador, como la edición de código en vivo combinada con un depurador que viaja en el tiempo.
Puede usar Redux junto con React, o con cualquier otra biblioteca de vistas. Es pequeño (2kB, incluidas las dependencias).
También según la documentación, hay tres principios para
Redux
como se muestra a continuación:
1. Fuente única de verdad
2. El estado es de solo lectura
3. Los cambios se realizan con funciones puras.
Básicamente, cuando necesita una sola tienda para realizar un seguimiento de cualquier cosa que desee en su aplicación, entonces Redux es útil, puede acceder a ella desde cualquier lugar de su aplicación, en cualquier ruta ... simplemente usando
store.getState();
También usando el middleware Redux, puede administrar el estado mucho mejor, ¡hay una lista de componentes prácticos y middleware en la página oficial de Redux!
Simplemente si su aplicación va a ser grande, con muchos componentes, estados y enrutamiento, ¡intente implementar Redux desde el principio! ¡Seguro que te ayudará en el camino!
He preparado este documento para entender Redux. Espero que esto aclare tu duda.
-------------------------- TUTORIAL DE REDUX ----------------------
ACCIONES: las acciones son cargas de información que envían datos desde su aplicación a la tienda. Son la única fuente de información de la tienda. Puede enviarlos solo usando store.dispatch ().
Example-
const ADD_TODO = ''ADD_TODO''
{
type:ADD_TODO,
text: ''Build my first redux app''
}
Las acciones son objetos javascript simples. La acción debe tener una propiedad [tipo] que indique el tipo de acción que se está realizando. El tipo debe definirse como una constante de cadena.
CREADORES DE ACCIÓN ----- ---------------- ---- Los creadores de acción son exactamente la función que crea la acción. Es fácil combinar los términos: acción y creador de acción. En la acción redux, el creador devuelve una acción.
function addToDo(text) {
return {
type: ADD_TODO,
text
}
}
para inicializar el envío, pase el resultado a la función dispatch ().
- despacho (addToDo (texto));
- despacho (completeToDo (índice))
Alternativamente, puede crear un creador de acciones vinculadas que se despache automáticamente.
cosnt boundAddTodO = text => dispatch(addToDo(text));
ahora puedes llamarlo directamente
boundaddTodO(text);
Se puede acceder directamente a la función dispatch () desde store.dispatch (). pero accedemos usando un método auxiliar connect ().
Actions.js .....................
Comportamiento...........
exports cosnt ADD_TODO = ''ADD_TODO'';
exports cosnt TOGGLE_TODO = ''TOGGLE_TODO''
Creadores de acciones
función de exportación addToDO (texto) {return {tipo: ADD_TODO, texto}}
......................... REDUCTORES ........................ ..........
Los reductores especifican cómo cambia el estado de las aplicaciones en respuesta a las acciones enviadas a la tienda.
Diseñando el shap estatal
En redux todo el estado de la aplicación se almacena en un solo objeto. Tienes que almacenar algunos datos, así como algunos estados.
{visibilidadFilter: ''SHOW_ALL'', todos: [{text: ''Considere usar redux'', completado: verdadero}, {text: ''Guarde todo el estado en un solo árbol''}]}
Acciones de manejo ---------------- los reductores son las funciones puras que toman el estado y la acción anteriores, y devuelven un nuevo estado.
(previousState, action) => newState
Comenzaremos especificando el estado inicial. Redux llamará a nuestros reductores con un estado indefinido por primera vez. Esta es nuestra oportunidad de devolver el estado de nuestra aplicación.
import { visiblilityFilters } from ''./actions'';
const initialState = {
visibilityFilter: VisibilityFilters.SHOW_ALL,
todo: []
}
function todoApp(state, action){
if(typeof state == ''undefined''){
return initialState;
}
// dont handle other cases as of now.
return state;
}
puede hacer lo mismo con la forma ES6 de manejar el JS
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
default:
return state
}
}
................................. TIENDA................ ...................
La tienda es un objeto que los une. la tienda tiene la siguiente responsabilidad
- mantener el estado de la aplicación
- permitir el acceso al estado a través de getState ()
- Permitir que el estado se actualice a través de dispatch ()
- Registrarse listerneres a través de suscriptor (oyente)
Nota. use combineReducers () para combinar varios reductores en uno.
const store = createStore (todoapp); // el todoapp son los reductores
React es un marco de UI que se encarga de actualizar la UI en respuesta a la "fuente de verdad" que generalmente se describe como un estado "propiedad" de algún componente. Thinking in React describe muy bien el concepto de propiedad del estado React, y le sugiero encarecidamente que lo revise.
Este modelo de propiedad del estado funciona bien cuando el estado es jerárquico y coincide más o menos con la estructura del componente. De esta manera, el estado se "extiende" a través de muchos componentes, y la aplicación es fácil de entender.
Sin embargo, a veces, partes distantes de la aplicación desean tener acceso al mismo estado, por ejemplo, si almacena en caché los datos recuperados y desea actualizarlos constantemente en todas partes al mismo tiempo. En este caso, si sigues el modelo React, terminarás con un montón de componentes muy grandes en la parte superior del árbol de componentes que pasan una miríada de accesorios a través de algunos componentes intermedios que no los usan, solo para llegar a algunos componentes de la hoja que realmente se preocupan por esos datos.
Cuando se encuentre en esta situación, puede (pero no tiene que) usar Redux para "extraer" esta lógica de administración de estado de los componentes de nivel superior en funciones separadas llamadas "reductores" y "conectar" los componentes de hoja que importa ese estado directamente en lugar de pasar los accesorios a través de toda la aplicación. Si aún no tiene este problema, probablemente no necesite Redux.
Finalmente, tenga en cuenta que Redux no es una solución definitiva para este problema. Hay muchas otras formas de administrar su estado local fuera de los componentes React; por ejemplo, algunas personas a las que no les gustó Redux están contentas con MobX . Le sugiero que primero obtenga una comprensión firme del modelo de estado React, y luego evalúe diferentes soluciones de forma independiente y cree pequeñas aplicaciones con ellas para tener una idea de sus fortalezas y debilidades.
(Esta respuesta está inspirada en la guía de react-howto Pete Hunt, le sugiero que también la lea).
Así es como funciona redux. Se envía una acción desde cualquier componente o vista. La acción DEBE tener una propiedad de "tipo" y puede ser cualquier propiedad que contenga información sobre la acción ocurrida. Los datos pasados en acción podrían ser relevantes para diferentes reductores, por lo que el mismo objeto se pasa a diferentes reductores. Cada reductor toma / hace su parte / contribución al estado. La salida se fusiona y se forma un nuevo estado, y se notifica al componente que debe suscribirse para el evento de cambio de estado.
En el ejemplo anterior, el color marrón tiene los 3 componentes RGB. Cada reductor recibe el mismo color marrón y separan su contribución al color.