Architecture and setup - Revision history

Spoudwa: /* Introduction */

2019-07-29T09:33:42Z

Introduction

← Older revision		Revision as of 09:33, 29 July 2019
Line 3:		Line 3:


	[[File:RailsArchitecture.png]][[File:ReactRedux.png]]		[[File:RailsArchitecture.png]]



			[[File:ReactRedux.png]]

	== Setup ==		== Setup ==

Spoudwa: /* Introduction */

2019-07-29T09:31:57Z

Introduction

← Older revision		Revision as of 09:31, 29 July 2019
Line 3:		Line 3:


	[[File:RailsArchitecture.png]][[File:ReactRedux.~~jpg~~]]		[[File:RailsArchitecture.png]][[File:ReactRedux.png]]

	== Setup ==		== Setup ==

Spoudwa: /* Introduction */

2019-07-29T09:31:40Z

Introduction

← Older revision		Revision as of 09:31, 29 July 2019
Line 3:		Line 3:


	[[File:RailsArchitecture.png]]		[[File:RailsArchitecture.png]][[File:ReactRedux.jpg]]

	== Setup ==		== Setup ==

Spoudwa: /* Introduction */

2019-07-27T00:29:02Z

Introduction

← Older revision		Revision as of 00:29, 27 July 2019
Line 1:		Line 1:
	== Introduction ==		== Introduction ==
	This project is about creating a new front-end for Expertiza, which is a RoR MVC application, by separating the view from the MVC architecture. For separating the view, the existing RoR application needs to be modified by creating APIs that will help the new front-end interact with the back-end. These APIs will render JSON objects instead of views that are rendered in the original application, thereby creating RESTful services that will enable the new front-end to procure information. ReactJS is used for creating the new front-end, with Redux used for state maintenance. For HTTP requests to the back-end services, axios, a promise based HTTP client is used.		This project is about creating a new front-end for Expertiza, which is a RoR MVC application, by separating the view from the MVC architecture. For separating the view, the existing RoR application needs to be modified by creating APIs that will help the new front-end interact with the back-end. These APIs will render JSON objects instead of views that are rendered in the original application, thereby creating RESTful services that will enable the new front-end to procure information. ReactJS is used for creating the new front-end, with Redux used for state maintenance. For HTTP requests to the back-end services, axios, a promise based HTTP client is used.


			[[File:RailsArchitecture.png]]

	== Setup ==		== Setup ==

Spoudwa: /* Rails API */

2019-07-22T03:35:14Z

Rails API

← Older revision		Revision as of 03:35, 22 July 2019
Line 50:		Line 50:
	=== Rails API ===		=== Rails API ===

	The Rails back-end code-base now has a separate namespace called <b>api/v1</b> for the new API only controllers. HTTP requests from the ~~axios~~ will be received by these controllers, which in turn will return JSON objects to the calling services.		The Rails back-end code-base now has a separate namespace called <b>api/v1</b> for the new API only controllers. HTTP requests from the front-end will be received by these controllers, which in turn will return JSON objects to the calling services.

Spoudwa: /* Rails API */

2019-07-22T03:34:44Z

Rails API

← Older revision		Revision as of 03:34, 22 July 2019
Line 50:		Line 50:
	=== Rails API ===		=== Rails API ===

	The Rails back-end ~~codebase~~ now has a separate namespace called <b>api/v1</b> for the new API only controllers.		The Rails back-end code-base now has a separate namespace called <b>api/v1</b> for the new API only controllers. HTTP requests from the axios will be received by these controllers, which in turn will return JSON objects to the calling services.

Spoudwa: /* Rails API */

2019-07-22T03:30:43Z

Rails API

← Older revision		Revision as of 03:30, 22 July 2019
Line 50:		Line 50:
	=== Rails API ===		=== Rails API ===

	The Rails back-end ~~code~~ now has a separate namespace called <b>api/v1</b> for the new API only controllers.		The Rails back-end codebase now has a separate namespace called <b>api/v1</b> for the new API only controllers.

Spoudwa: /* Redux Middleware */

2019-07-22T03:30:28Z

Redux Middleware

← Older revision		Revision as of 03:30, 22 July 2019
Line 46:		Line 46:

	The <b>ActionType.js</b> contains string literals for our action types. These strings are exported as an object literal which can then be imported into your reducers and action creators instead of hard-coding them. In <b>index.js</b> we re-export our operations, reducers and action types.		The <b>ActionType.js</b> contains string literals for our action types. These strings are exported as an object literal which can then be imported into your reducers and action creators instead of hard-coding them. In <b>index.js</b> we re-export our operations, reducers and action types.


			=== Rails API ===

			The Rails back-end code now has a separate namespace called <b>api/v1</b> for the new API only controllers.

Spoudwa: /* Redux Middleware */

2019-07-22T02:45:31Z

Redux Middleware

← Older revision		Revision as of 02:45, 22 July 2019
Line 39:		Line 39:
	Libraries like React are built with a way for components to internally manage their state without any need for an external library or tool. But, as the application grows bigger, managing states shared across components becomes tedious. For instance, to share data among siblings, a state has to live in the parent component. A method for updating this state is provided by the parent component and passed as props to these sibling components. If the state has to be shared between components that are far apart in the component tree, the problem worsens. This is why we use Redux, which makes it easier to maintain these states. Redux is a central store that holds the entire state of the application, which can be accessed by every component of the React app, without having to send down props from one component to the other.		Libraries like React are built with a way for components to internally manage their state without any need for an external library or tool. But, as the application grows bigger, managing states shared across components becomes tedious. For instance, to share data among siblings, a state has to live in the parent component. A method for updating this state is provided by the parent component and passed as props to these sibling components. If the state has to be shared between components that are far apart in the component tree, the problem worsens. This is why we use Redux, which makes it easier to maintain these states. Redux is a central store that holds the entire state of the application, which can be accessed by every component of the React app, without having to send down props from one component to the other.

	For setting up Redux in the React application, three packages are ~~requires~~, viz, redux, react-redux and redux thunk.The three building parts of Redux are actions, store and reducers. Actions are events by which you can send data from your application to the Redux store. Reducers are pure functions that take the current state of the application, perform an action and return a new state. The store holds the state of the application. As the application grows, we will have multiple reducers, each managing independent parts of the state. We use configureStore to combine all such reducers into a single reducer function.		For setting up Redux in the React application, three packages are required, viz, redux, react-redux and redux thunk.The three building parts of Redux are actions, store and reducers. Actions are events by which you can send data from your application to the Redux store. Reducers are pure functions that take the current state of the application, perform an action and return a new state. The store holds the state of the application. As the application grows, we will have multiple reducers, each managing independent parts of the state. We use configureStore to combine all such reducers into a single reducer function.

	The resulting directory structure of the Redux store is as follows,		The resulting directory structure of the Redux store is as follows,

Spoudwa: /* Redux Middleware */

2019-07-22T00:02:43Z

Redux Middleware

← Older revision		Revision as of 00:02, 22 July 2019
Line 45:		Line 45:
	[[File:Redux.PNG]]		[[File:Redux.PNG]]

	The <b>ActionType.js</b> contains string literals for our action types. These strings are exported as an object literal which can then be imported into your reducers and action creators instead of hard-coding them.		The <b>ActionType.js</b> contains string literals for our action types. These strings are exported as an object literal which can then be imported into your reducers and action creators instead of hard-coding them. In <b>index.js</b> we re-export our operations, reducers and action types.