Pregnancy Fitness: An React-Redux app with a Rails backend
For my final portfolio project, i created an app Pregnancy Fitness, where user have access to covers all physical and physiological aspects of pregnancy so you can enjoy peace of mind throughout your pregnancy and long after delivery. In this app, user have access to all safe workouts for pregnancy for all trimester’s and have their meal plan with few delicious and healthy recipes and I decided to incorporate a feature where a user can browse fitness places in their area.The app allows user to log in and logout and also can create workout and for specific workout user can create more safe exercise to add up in their pregnancy fitness app.
Rails API: The first step in creating this app is set up rails backend.Firstly i focused on outlining my models and their relationships.The backend implements a user model, workout model, exercise model, meal plan model , meal model, fitness planner model, review model.
Serializer
The Active Model Serializer is used to build the JSON objects. It allows me to select only the information I want to display.
2. React App
I used the create-react-app generator to start my project. Create-React-App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. Create React app doesn’t handle backend logic or database, it just creates frontend pipeline, so you can use it with any backend you want.
3. React-Redux
React-Redux being a state management tool makes it easier to pass these states from one component to another irrespective of their position in the component tree. React-Redux allows your React components to read data from a Redux store, and dispatch actions to the store to update data.The <Provider> component makes the Redux store available to any nested components that need to access the Redux store.
In my src folder. i created a folder of Components, Redux. React-redux provides a store which makes the state inside components easier to maintain. Along with stores, react-redux introduces actions and reducers which work simultaneously with stores to make the state more predictable. A store is an immutable object tree in Redux. A store is a state container which holds the application’s state. Redux can have only a single store in your application.The actions part of the react-redux basically contains the different actions that are to be performed on the state present in the store.The actions included must contain the type of the action and can also contain payload(data field in the actions).React Redux also provides a connect function, which allows to connects a React component to a Redux store.It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store.MapStateToProps is function which passsed first argument to connect and will be called every time when the Redux store state changes.The mapStateToProps is used for selecting the part of the data from the store that the connected component needs.If you do not wish to passed to the store, pass null or undefined to connect in place of mapStateToProps.As the second argument passed in to connect, mapDispatchToProps is used for dispatching actions to the store.As our app grows it gets difficult to manage our reducer function so that’s why i split the single function into a multiple independent reducer functions which manage their own state.combineReducer function takes multiple reducer functions as an argument and turns down into a single reducer function.
I have imported every reducer functions and then imported a combineReducer function from the ‘redux’ library. Redux-Thunk Middleware With a plain basic Redux store, you can only do simple synchronous updates by dispatching an action. Middleware extends the store’s abilities, and lets you write async logic that interacts with the store.
Router
React Router allows single page applications (SPA) to navigate through multiple views without having to reload the entire page.In the Route component, we pass the two props: the path and the component the user sees when they navigate to the path.For my project, i need to go through several pages and nested data.
View the source code https://github.com/rupinderkaur30-gif/Pregnancy-Fitness-.
