Repository

React

https://github.com/facebook/react

Material-ui

https://github.com/mui-org/material-ui

My Github Address

https://github.com/pckurdu

This Project Github Address

https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-3

What Will I Learn?

• You will learn to build the redux structure in react applications.
• You will learn to use store and reducer concepts in redux.
• You will learn to combine two reducer and use it in store.
• You will learn the connect module in redux.
• You will learn the combineReducers module in redux.
• You will learn the createStore module in redux.
• You will learn the Provider module in react-redux.

Requirements

• text editor (I used visual studio code editor)
• Basic javascript information
• Basic react information

Difficulty

• Basic

Tutorial Contents

In this tutorial we will set up the redux structure in our react application and show 2 of the 3 elements of redux. We will learn how to use store and reducer structure from redux elements and what it does.

We'll also create fake data in this tutorial and we'll show this data in the ProjectSummary component using the redux structure. To do this, we will design the ProjectSummary Component using MaterializeCSS.

I'll section this tutorial for a better understanding and I'll explain these sections in detail, so you can better integrate the issues and there will be no more exposed topics.

First, we will create the ProjectSummary component to list the projects and we will use this component that we created in the ProjectList page.

Then we will use the store structure in redux. In this section we will learn what the Store works for and how to use it in the react.

Then we will do the authentication settings and the reducers in which we will process our data. Since we will define more than one reducer, we will combine them and make them ready for the store.

Finally, we'll create our fake data and we'll define it for use in the store and we will access this data within the ProjectSummary component.

The following is a list of chapters:

• Create ProjectSummary Component
• Create Store
• Create Reducers
• Use Reducer in Store
• Create Fake Data

Let’s start and enjoy

1-Create ProjectSummary Component

In this section, we will create the ProjectSummary component using materializeCSS and we will show the properties of the project with this component and use it in ProjectList.

We have created 3 projects in ProjectList component in previous tutorial. We can create ProjectSummary using one of them. Then all we have to do is to import ProjectSummary in ProjectList.

In ProjectSummary.js

import React from 'react'

const ProjectSummary = () => {
  return (
    <div>
        {/* We use the card class to create a card. */}
        <div className="card z-depth-0 project-summary">
        {/* With the card-content class, we create the body part of the card space. */}
            <div className="card-content grey-text text-darken-3">
            <span className="card-title ">Project title from ProjectSummary</span>
            <p>Posted by The Pckurdu</p>
            <p className="grey-text">3rd September, 2am</p>
            </div>
        </div>
    </div>
     
  )
}

export default ProjectSummary

We should show it in ProjectList when we make such an adjustment.

In ProjectList.js

import React from 'react'
import ProjectSummary from './ProjectSummary';

const ProjectList = () => {
  return (
    <div className="project-list section">
    {/* we can use as much projectSummary as we want. */}
      <ProjectSummary/>
      <ProjectSummary/>
      <ProjectSummary/>

    </div>
  )
}

export default ProjectList

When we do this, there will be no changes in the image. The reason we do is that we can access each project and make it easier to control.

2-Create Store

In this section we will create the store within the application. Primarily we start by explaining what is store.
When we decide to use the redux structure within the react applications, we must first create a store. With store, we can avoid the complexity of data generated using react state.

Using states creates problems as the project progresses and becomes more complex. We can avoid this complexity by using the store in redux.

If we need to explain briefly, the store is the structure in which our data are controlled.

We can create a store using the createStore module in redux packages.

Let's create store.

First we download redux packages to our project files.

yarn add redux

Then create the store in the file where the components of the application are rendered.

In index.js

//createStore import code
import {createStore} from 'redux';

//We create a store using createStore.
const store=createStore();

The reason why we create store in index.js is because we render the App component in this file.
So we have created the store but we have to provide this store App component, we will do this later.

3-Create Reducers

Before creating the reducer, what should the reducers do?

Reducer allows us to determine how to change the states in store. By creating reducer, we also have access to store states.

We will create the reducers in a separate folder so let's create the store folder into the src folder. In the store folder, create the reducers folder and create the authReducer.js and projectReducer.js files in this folder.

We'll create reducer in authReducer.js. With this reducer, we will send the authentication information to the store.

In authReducer.js

//default data is used if no state data is assigned.
const initState={}

//create reducer with state and action parameters
const authReducer=(state=initState,action)=>{
    return state
}

export default authReducer

Then we'll create a projectReducer. With this reducer, we will forward the project data to the store.

In projectReducer.js

//default data is used if no state data is assigned.
const initState={}

//create reducer with state and action parameters
const projectReducer=(state=initState,action)=>{
    return state
}

export default projectReducer

We created two reducers and we have to use them in the store but we have a problem. One reducer is used in one store. Since we are going to create one store, we need to follow a different way to use these reducers.

4-Use Reducer in Store

We can create a merge to use the two reducer in the store. In another file by combining these two reducer and placing the result into the store we overcome this problem.

We will use the combineReducers module to combine the reducers. This module allows multiple reducers to operate like a single reducer.

In the reducers folder, we'll create the rootReducer.js file.

In rootReducer.js

//Let's import the reducers to be merged
import authReducer from './authReducer';
import projectReducer from './projectReducer';

//Let us call the combiner module.
import {combineReducers} from 'redux';

//Let's do the merge using combineReducer.
const rootReducer=combineReducers({
    auth:authReducer,
    project:projectReducer
});

export default rootReducer

We create a constant using the combineReducer and create the identifier for the reducers. Thanks to these identifiers we can access the reducers.

We can now use rootReducer in the store so we use two reducer.

In index.js

import rootReducer from './store/reducers/rootReducer';

//We create a store using createStore.
//Let's give  reducer as parameter
const store=createStore(rootReducer);

Finally, we should provide the App component according to the store. We will use the Provider module included in the react-redux packages to perform this operation.

yarn add react-redux

In index.js

import {Provider} from 'react-redux';
…
//In store attribute, we place the store that we created.
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

5-Create Fake Data

We will create fake data for testing purposes in this section and we will use this data from the store through the application.

Let's create project objects within the initState function in projectReducer.

In projectReducer.js

//default data is used if no state data is assigned.
const initState={
    //projects data
    projects:[
        {id:'1',title:'pckurdu1',content:'first project'},
        {id:'2',title:'pckurdu1',content:'second project'},
        {id:'3',title:'pckurdu1',content:'third project'},
    ]
}

We can now use the store on the Dashboard page. We will access the store created using connect module and then produce a function. This function will access the store with the state object and bring the information we want from this state.

In Dashboard.js

//import connect module
import {connect} from 'react-redux';
…
//function that gets data from store
const mapStateToProps=(state)=>{
  return {
    projects:state.project.projects
  }
}

export default connect(mapStateToProps)(Dashboard)

Import the auth and project objects in the rootReducer into the state object. With project object we can access projectReducer. Here we also access the projects object defined in initState.

Data is now added to the props of the Dashboard page. Let's we'll print incoming data to the console.

console.log(this.props);

We can define this data in ProjectSummary.
Firstly we send this data from the Dashboard page to the ProjectList page.Then we use map because there is more than one data.

//let's use projects object
    const {projects}=this.props;
…
{/* here ProjectList Component  */}
   <ProjectList projects={projects}/>

We need to re-create the ProjectList function with this data.

In ProjectList.js

const ProjectList = ({projects}) => {
  return (
    <div className="project-list section">
    {/* we can use as much projectSummary as we want. */}
      {projects && projects.map(project=>{
        return (
          <ProjectSummary project={project} key={project.id}/>
        )
      })}

    </div>
  )
}

Let's print incoming data to the console in ProjectSummary.

const ProjectSummary = ({project}) => {
  console.log(project)

Finally, you need to make the necessary settings to show the data on the screen.

const ProjectSummary = ({project}) => {
  console.log(project)
  return (
    
    <div>
        {/* We use the card class to create a card. */}
        <div className="card z-depth-0 project-summary">
        {/* With the card-content class, we create the body part of the card space. */}
            <div className="card-content grey-text text-darken-3">
            <span className="card-title ">{project.title}</span>
            <p>Posted by The Pckurdu</p>
            <p className="grey-text">3rd September, 2am</p>
            </div>
        </div>
    </div>
     
  )
}

Curriculum

https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-1

https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-2

Proof of Work Done

https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-3