TLDR: puede manejar el estado con un reductor en sus Componentes de clase al tener una función que traduce las acciones en cambios de estado. Centraliza todos tus setStates.
? ¿Qué es un reductor?
Los reductores son funciones que toman información y deciden qué hacer con ella en un lugar central. Eso es. ?
Si tiene una función que determina la vista que se mostrará en función de una URL, es un reductor.
Redux Reducers ™ ️ es un uso específico de reductores que interpretan eventos en su aplicación y cómo eso cambia el estado de la aplicación.
Si no está familiarizado con Redux, el ejemplo anterior generalmente se inicia llamando a una dispatchfunción con un action(objeto que describe un evento). ?
Podemos usar reductores ahora mismo en un componente de clase creando una función que maneja la configuración del estado mediante un tipo de acción como este:
En mi opinión, usar un reductor en este sencillo ejemplo es excesivo. Me alegro de que React proporcione un useStatey un useReducergancho por esa razón.
Si notaba que estaba transmitiendo formas de cambiar el estado y me countacoplaba con algunas propiedades de estado más, cambiaría a un reductor.
Dado que Redux pone todo su estado en un objeto que crece rápidamente, hace que el patrón reductor encaje perfectamente. Es posible eliminar reductores de Redux, aunque perderíamos un montón de características increíbles.
Redux le permite connectalmacenar globalmente su componente. Puede traducir el estado en accesorios. También proporcionan una dispatchfunción que activa sus reductores.
En lugar de pasar una dispatchfunción, pasemos una updatefunción que funcione como setState.
? Creando una peor versión de Redux
Cuando llama a la actualización, está diciendo exactamente cómo debe cambiar el estado en línea. Puede o no estar junto a otros cambios de estado similares.
Con un estado lo suficientemente pequeño, esto realmente se siente agradable y conciso. Si tuviéramos 5 o más componentes cambiando algunas propiedades de estado, sería difícil encontrar la fuente de los errores. ? ?
Incluso sin cambiar redux en absoluto, puede emular este patrón. Despachar acciones que parecen SET_COUNTpistas que realmente solo queremos setState. Es lo fácil de hacer.
Si creamos una acción menos obstinada, como INCREMENT_BUTTON_CLICKEDpodríamos usarla en muchos reductores, y la carga útil de la acción no variaría demasiado.
? Los reductores son útiles para más que el estado
Los reductores son una excelente manera de colocar decisiones. Si ha trabajado con react-router-4 antes, entonces el código anterior debería resultarle bastante familiar.
Gracias a
Now if someone has the question “What are all the ways the URL can change what renders”, they have one central place to look.
? Summing It Up
Reducers as a pattern exist outside of Redux and Javascript and are simple to implement. They have one single responsibility of taking input and giving output.Redux Reducers turn app events into state. You don’t need Redux to do this now, you can do it with local component state.Reducers make it easy to organize and find different variations of what can happen in the code and are useful as apps grow large.
If you have any questions or are looking for one-on-one React mentorship, feel free to tweet me @yurkaninryan any time!
If you like my writing style, here are some other articles that I’ve done.