Next steps in implementing our dashboard


In the Dashboard.js file we will make some small improvements in order to advance the development process:

Changes in (you can click the diffs image to make it larger):
src/components/Dashboard/Dashboard.js

914_code1

Below we have introduced statefull Dashboard component - we need it to do this way as we are using componentDidMount for invoking the function called this.props.dashboardVisitIncrement().

IMPORTANT: The statefull Dashboard component is required here because our feature (increment by one on every visit of the dashboard route) requires using a componentDidMount and we assume that in the components directory we want to have only "dumb components". In the src/components we will keep only stateless components (in other words they are also called dumb components).

Changes in (you can click the diffs image to make it larger):
src/routes/Dashboard/components/Dashboard.js

915_code2

Now we have collect our component with container which fetches our dashboardVisitIncrement() action from the application

Changes in (you can click the diffs image to make it larger):
src/routes/Dashboard/containers/DashboardContainer.js

915_code2

In the modules/dashboard.js we have made some improvements and cleaned up the unnecessary code that was copied initially from the Counter:

Changes in (you can click the diffs image to make it larger):
src/routes/Dashboard/modules/dashboard.js

916_code3

... at this point you shall have an app which increments on componentDidMount of the Dashboard component as on the animation below:

917_gif_works_dashboard_v2

As you can see above, it still is a very simple dashboard. The next step is to add the ability of adding a list of dashboard items that can:

  • add an item to the list
  • remove an item from the list
  • edit an item on the list
Source code from the screenshots: https://github.com/ReactPoland/reactjs-redux-tutorial/commit/chapter-3

React Poland 2017