Simply List of links to React+Redux Tutorials and samples
Elements of a React Redux App
I like React + Redux Combination because I feel there is a mapping 1 to 1 between use cases vs pieces of code.
When the state is changed, React recognizes wich visual components should be affected and only “refresh” (reacts to) those.
The main identifiable elements on such architecture are:
State
There is a unique and global state. This is the principle of redux that is referenced as a unique source of truth. The state represents a snapshot of the app at one point of the time.
Note that the State in a React-Redux application has a particular meaning different from State’s meaning in a React application. In the React application, the State could be local or partial to each component / container . In a React Redux application, there should normally be a single global state.
Actions & Action Builders
Action are elements of the form (type, value1, value2, value3… ). The type identifies the event or the “action” that should be taken, and the values the elements needed for performing that action. e.g. {type: ADD_CUSTOMER, values: [customerId: 1228, customerName: “John Fitzgerald Washington”, Address: “Siempreviva 1234, Boston”]} or {type: REMOVE_CUSTOMER, customerId: 1228} or simply with 0 values like {type: REFRESH_CUSTOMERS}
There is one action for each use case at least. In cases in which there are several steps to complete a result, like an async call, generally will be defined as one action for each resulting scenario. e.g. {type: REQUEST_CUSTOMER_LIST,values:….}, {type:REQUEST_CUSTOMER_LIST_CANCELLED, values:….}, {type:REQUEST_CUSTOMER_LIST_COMPLETED, values:….}
In this example, each event generates a new action that will change the state when it happens.
Actions basically define something that happens and the parameters for performing that event or “action”. In the actions section, there are a bunch of methods that execute instructions generating an “action” that is dispatched to the react lifecycle.
Each event fires the execution of an action. Action section is the place where async services are executed. Actions generally communicate with the backend or external functions calling services layers which could use the Axios or another library to make rest calls to the backend.
Once actions get deterministic values, dispatch the corresponding values to reducers to change the state. (using the dispatch(…) method)
Reducers
In the reducers section of the app for each action type, it is defined as the changes that are produced in the global and unique state. Each reducer operation based on the global state and the action (and its parameters) generates a new global state. The state at a moment is like a snapshot of the frontend application. Based on the state Reacts knows what to show in the frontend, how to visualize it.
The reducers execute deterministic code changing the state. React will show the corresponding changes on the screen based on the new state values. The logic inside reducers is “deterministic”
What is “deterministic” code? It refers to the code that produces always the same result. For example, if the code gets the current Date & Time or it calls to an external entity/service to get a result, it is not deterministic. Also, it is not deterministic if it calls a kind of random function or if it waits for the user input.
The actual frontend is generally defined by 2 simple types of components commonly named Containers and “Components”
Containers
The containers generally. Based on the current state, make calculations and define parameters to call the “visual” components.
They make simple calculations and choose which values of the state are relevant to show that specific part of the screen. They finish calling the components to show the frontend.
Components
It refers mainly to visual components. In some tutorials, confusion arises when Containers are also called components.
Generally, Components receive parameters calculated in Containers and show the application. In React they prepare HTML tags to be shown. In React Native they prepare the mobile visual elements to be displayed.
They are almost HTML (in React) or Visual Components (in React Native) with additional tags and embedded “variables” and methods to finish building the frontend.
Services
There is no such a kind of component like “Services” in the React+Redux schema, as it generally solves the frontend part of the app. But It’s common to have a service layer separated to the actions in order to have cleaner the Actions code.
The services could make REST calls obtaining JSON from the backend using Axios libraries. It generally returns Promises. (Promises are a kind of async objects that does not follow a sequential order of execution but makes a call and continue executing when the response is received without stopping executing other code).
The list of resources
React Native + Redux List got from 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
React + Redux Registration and Authentication
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
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/
Related information:
What are Nodejs and Express
React Redux Master Details Scaffold Demo
https://www.youtube.com/watch?v=BvLBY6YJ4oQ
https://github.com/apptain/master-details-scaffold
Tutorial React Native + Redux with CRUD Operations
https://medium.com/mesan-digital/tutorial-react-native-redux-with-crud-operations-cdb449538886
React Native Simple Sample App
https://github.com/jguastav/react-native-redux-app
A Guide for Building a React Redux App
https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f
React Redux Blog
https://github.com/rajaraodv/react-redux-blog
Intermediate Step by Step Tutorial using React Redux and Redux Saga
Country Picker Tutorial
https://github.com/Joe312341/country-picker-tutorial
Redux CRUD Example
https://codeburst.io/redux-a-crud-example-abb834d763c9
CRUD with React Redux
https://github.com/pratik-chakravorty/CRUD-with-React-Redux
React Redux Blog
https://github.com/jguastav/react-redux-blog
A great site
React Introduction
https://survivejs.com/react/introduction/
What is Webpack
https://survivejs.com/webpack/what-is-webpack/