React Redux Development

For a beginner, it can be very confusing to create a React Redux app as a lot of new concept have to be understood and combined before anything sensical can be built. This post is supposed to sketch out a process for getting a React Redux app up and running in a controlled manner.

The steps are ordered from the backend towards the frontend of the application. Starting from the backend that exposes a API, the Redux model/container and then finally the React components in the frontend are created.

Creating the Backend

1. Create the database schema in a database
2. Create a node server using express
3. …

Creating the Redux Part

1. Define the JavaScript Object that describes the applications state
2. Define the actions that can be performed on the state
3. Define the action creators that create the actions
4. Define the reducers for the actions. The default value of the reducers state parameter defines the initial state of the Redux Container.
5. Define the root reducer as a combinedReducer from all reducers.
6. Define thunk reducers that retrieve data from the backend
7. Create the container with the initial state
8. Write a test for the entire Redux part of the application

Creating the React Part

1. Define the components. Define what properties the components have that means, what properties the components take the data from when rendering the GUI. The properties of the component act as the interface of the component. It is the task of the React-Redux mapStateToProps Method to adapt the Redux container state to the props of the component
2. Connect the components to Redux using Redux-React. Use mapStateToProps to map the Redux container state to the components properties.