ReactGo – Steps to add a new data set to the store.

I’m documenting this because I want to make sure I catch everything for the eventual yeoman generator I intend to build….

Using my Material-UI modded version of ReactGo boilerplate (commit d5f71395f8eca8a0d9a1be162bbd20674d7cdcdd, Feb 16, 2017)

In order to support multiple datasets being loaded into one page from the router I’ve modded the current base to suit my needs summary of changes are on my version of the repo.  These changes were based on the work of @k1tzu & @StefanWerW

Right now I’ve got it down to a 12 step process… (whew!) lets get into it…


Server Side

  1. Create the Model

    server > db > mongo > models > classification.js (new file)
    I usually start by duplicating an existing model and modding it.  All you really need to do is change the const value and the exported model name.  Then define your schema items…

  2. Create the Controller

    server > db > mongo > controllers > classification.js (new file)
    Next up we duplicate a controller.  I usually target one that has all the basic CRUD in it then remove what won’t be necessary for this and create the additional custom functions as necessary.  Update the import reference… and the response messages…

  3. Update the indexes…

    server > db > mongo > models > index.js
    + require(‘./classification’);
    server > db > mongo > controllers >index.js

  4. Create the routes

    server > init > routes.js


Client Side

Now that we have our server side configured for the new data set we need to prepare to consume it on the client side.

  1. Set up the reducer

    app > reducers > classification.js (new file)
    I’m basing this off the needs I have for basic crud.

  2. Add the new reducer to the root reducer

    app > reducers > index.js
    Add an import for the new reducer and add it as a property in the combineReducer function as well.

  3. Register the types we just created

    app > types > index.js


  4. Create a data fetcher for the ‘items’

    app > fetch-data > fetchClassificationData.js (new file)


    *Remember to update the app > fetch-data > index.js to export your new data fetcher.

  5. Create the Service (if your following their pattern explicitly…).

    I’m skipping this because services appear to be pointless 8 line wrapper for a simple axois call…  Just put the axios request in the data fetcher directly…. as indicated above.

  6. Put your dataFetcher in your routes “fetchData” property

    app > routes.jsx

    Add “fetchClassificationData” to import statement and appropriate route.
    *NOTE: I’m not showing mine because I’ve modified my fetchDataForRoute utility to accept an array for data… this doesn’t work in the base repo yet.

  7. Create some actions

    app > actions > classifications.js (new file)

  8. Add the data set and actions to your Container

    Some example of things you might want to add to your container for user are below.

That’s all she wrote for now happy coding!  Feel free to post fixes, spelling corrections and questions in the comments. (I am one of the worst spellers…)

4 thoughts on “ReactGo – Steps to add a new data set to the store.

  1. Chetan says:

    This is really useful!

    One thing bothers me. Why is fetchData returning object instead of promise like in fetchVoteData??

    1. Joe says:

      If you take a look in my version of the boiler plate you’ll see that I modified the methodology behind the fetch data so I could fetch data from multiple datasets for one route.

  2. Chetan says:

    Another thing is, performance of webpack build is not good or is it my doing?

    1. Joe says:

      Not sure what you mean… when the server has to restart after a server file change it does take a few seconds but mine still complete in less than 1000ms usually. As far as the HMR on the FE goes I’m aware of the issue. The page load delay is a kind of crappy it boils down to an old module that the original boilerplate used in the version I started from. Once I refactor the project to use React Router 4 I’ll be able to replace HMR with something a bit more robust and efficient.

Tell me what you REALLY think...

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">