For this project the main requirements to meet are as follows:
- Your app should have one HTML page to render your react-redux application
- There should be 2 container components
- There should be 5 stateless component
- There should be 3 routes
- The Application must make use of react-router and proper RESTful routing
- Use Redux middleware to respond to and modify state change
- Make use of async actions to send data to and receive data from a server
- Rails API should handle the data persistence. You should be using fetch() within your actions to GET and POST data from your API - do not use jQuery methods.
- Client-side application should handle the display of data with minimal data manipulation
- Application should have some minimal stylin
To run my specific application, be aware the following additional npm dependencies were needed.
“dependencies”:
“redux”: “4.0.5”, “redux-form”: “8.3.0”, “redux-thunk”: “2.3.0”, “semantic-redux-form-fields”: “0.3.8”, “semantic-ui-react”: “0.88.2”
“devDependencies”: “sass”: “1.25.0”
Let’s look at a very generalized review about how I handled these tasks.
The app should have one HTML page to render the react-redux application.
This is accomplished via a single index.html file with a root id div element with an id=”root” where all rendering will take place.
There should be 2 container components.
Since a container component houses other components that work together. In this app I have used at a minimum: A header with icons, the date, sign-in and out buttons. A footer with the app name and current year. A patient care report list, that displays the list of reports and admin functions
There should be 5 stateless components.
Using redux-store a single external state is achieved and accessed using function components and {connect} from ‘react-redux’ instead of class components and their individual class level states.
There should be 3 routes.
I took care have having enough routes by simply having all crud actions. Instead of three routes the app has at least five through the use of Index, Show, Edit, Create, Delete.
The Application must make use of react-router and proper RESTful routing. This was accomplished by name spacing the rails API resources appropriately resulting in: “ http://localhost:300/api/v1/reports”
Use Redux middleware to respond to and modify state change.
State change is handled with redux thunk.
Make use of async actions to send data to and receive data from a server.
Asynchronous fetch calls are used for CRUD actions. Rails API should handle the data persistence. You should be using fetch() within your actions to GET and POST data from your API - do not use jQuery methods.
Building from the backend to front facing elements, I quickly implemented a Rails API.
Client-side application should handle the display of data with minimal data manipulation.
The only Client-side data manipulations is the actuals creation or editing of report data.
Application should have some minimal styling.
Taking advantage of both custom CSS and the Semantic-UI interface, adding some styling was easily achieved.
