Mocked items list on the dashboard list


Here we will implement a list of the array frameworks/libraries:

Let's create a new component and integrate to our Dashboard view. This component gets a array and renders a list, where each item covered by tag h4

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

918_code1

New stateless component (you can click the diffs image to make it larger):
src/components/Dashboard/ListJSX.js

918_code1

Above you need to add a new file ListJSX code

const items = dashboardItems.map((item, i) => (
  <h4 key={i}>{item.label}</h4>
))

It's a less format for mapping our array (see ES6 lessons below). Here a compatible example:

const items = dashboardItems.map((item, i) => {
    return (
      <h4 key={i}>{item.label}</h4>
    )
})

then modify our Dashboard statless component, namely the arguments list:

export const Dashboard = ({ visitsCount, dashboardItems }) => (
)

and inside our Dashboard body:

{visitsCount}
Warning! It's an another approach and easier way to fetch property from the input object. I suggest to use the ES6, which allow to write more readble code in less time

... all the changes above are required because we have modified our reducer's structure (as you can find below):

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

919_code2

As you can see above, we have changed the old initialState:

// old dashboard reducer structure
const initialState = 0

with the new code:

// new dashboard reducer structure
const initialState = {
  visitsCount: 0,
  dashboardItems: [
    {key: 0, label: 'Angular'},
    {key: 1, label: 'JQuery'},
    {key: 2, label: 'Polymer'},
    {key: 3, label: 'ReactJS'}
  ]
}

So generally, we have changed the simple integer initialState to an object, as you can see above. We have also improved the DASHBOARD_INCREMENT action:

// old codebase
[DASHBOARD_INCREMENT]: (state, action) => state + action.payload

with new:

// updated codebase
  [DASHBOARD_INCREMENT]: (state, action) => ({
     ...state,
     visitsCount : state.visitsCount + action.payload
   })

That DASHBOARD_INCREMENT change was required because as was written earlier, we have modified the initalState's structure of the dashboard reducer (so we also need to change the function that handles it). The Object.assign's (in example '...' feature from ES6) visitsCount is used the same way as on the Redux's tutorial's videos on EggHead.

Currently, we have made small improvements to the dashboard with a list and the visitsCount also works like before (alongside with improved dashboard's reducer):

920_app_dashboard_with_list.gif

Source code from the screenshots: https://github.com/ReactPoland/reactjs-redux-tutorial/commit/chapter-4

React Poland 2017