Lista simple de Links hacia Tutorials y Ejemplos de React+Redux
Elementos de una Aplicación React Redux
Me gusta la combinación de React + Redux porque siento que hay una relación en la que se pueden mapear 1 a 1 los casos de uso con los elementos del código
Al cambiar el estado, React reconoce qué componentes visuales son afectados y sólo «refresca» o actualiza tales componentes.
Los principales elementos identificables en la arquitectura son :
Estado (State)
Existe un único estado global para toda la aplicación. Este es el principio de Redux, que es llamado : única fuente de verdad. El estado representa una foto de un instante de la aplicación en un punto en el tiempo.
Notar que el estado en una aplicación React Redux tiene un significado particular diferente al que tiene en una aplicación React. En la aplicación React el estado puede ser local a cada componente (o global). En una aplicación React Redux normalmente debería existir un único estado global.
Acciones (Actions & Action Builders)
Se define al menos una acción por cada Caso de Uso. En los casos en los cuales se requieren varios pasos para completar un resultado, como en una llamada asincrónica, generalmente se define una acción por cada uno de los escenarios posibles. Ejemplo: (Hacer la llamada / Respuesta con error / Respuesta exitosa )
Las acciones basicamente definen algo que ocurre y los parámetros para implementar ese evento o «acción» (Ejemplo: En Alta de Cliente los parámetros serán los datos del cliente)
Reducers
En la sección de reducers para cada acción se define los cambios que producen en el estado global y único la acción a ejecutar. Cada operación en la sección de reducers se basa en el estado actual + la acción a ejecutar, y produce un nuevo estado.
Contenedores (Containers)
Los contenedores, generalmente, basado en el estado actual hacen cálculos en los que se crean parámetros que serán pasados a los componentes visuales para que muestren la visualización resultante del estado actual.
Components
Se refiere principalmente a componentes visuales. En algunos tutoriales surge una confusión porque tanto los Componentes Visuales como los Containers son llamados «componentes» .
Generalmente, los Componentes reciben parámetros calculados por los containers y generan lo que se muestra de la aplicación. Para una aplicación React, preparan HTML tags a ser mostrados en un entorno web. Para una aplicación React Native preparan elementos visuales de la plataforma mobile que se use, ya sea Android o IOS.
La lista de recursos , tutoriales y ejemplos
Lista React Native + Redux obtenida desde una API
https://github.com/jguastav/FE-Code-Test
React + Redux + oAuth
https://medium.com/@mattmazzola/react-simple-auth-react-redux-oauth-2-0-de6ea9df0a63
https://github.com/mattmazzola/react-simple-auth
Registración y Autenticación con React + Redux
http://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example
https://github.com/cornflourblue/react-redux-registration-login-example
React + Redux + Login + CRUD (ABM)
https://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/
https://github.com/SophieDeBenedetto/catbook-redux
https://github.com/SophieDeBenedetto/catbook-api/
Información relacionada:
Qué es Nodejs and Express
React Redux Cabecera Detalle Scaffold Demo
https://www.youtube.com/watch?v=BvLBY6YJ4oQ
https://github.com/apptain/master-details-scaffold
Tutorial React Native + Redux con operaciones CRUD (ABM)
https://medium.com/mesan-digital/tutorial-react-native-redux-with-crud-operations-cdb449538886
Aplicación simple React Native + Redux
https://github.com/jguastav/react-native-redux-app
Una guía para crear una aplicación React Redux
https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f
React Redux Blog
https://github.com/rajaraodv/react-redux-blog
Tutorial intermedio usando React Redux y Redux Saga
Tutorial de Selección de Paises
https://github.com/Joe312341/country-picker-tutorial
Ejemplo Redux de CRUD (ABM)
https://codeburst.io/redux-a-crud-example-abb834d763c9
CRUD (ABM) con React Redux
https://github.com/pratik-chakravorty/CRUD-with-React-Redux
React Redux Blog
https://github.com/jguastav/react-redux-blog
Un sitio para recomendar
Intoducción a React
https://survivejs.com/react/introduction/
Qué es Webpack
https://survivejs.com/webpack/what-is-webpack/