Setting up complete React Redux SPA application

This article is the continuation of the previous article I published, https://medium.com/@waihein/setting-up-laravel-react-js-spa-application-decf269ed3b3. So I recommend going through the previous article before you continue because we will be installing Redux on the project from the previous article.

Install the required npm dependencies.

• npm install react-redux redux redux-thunk redux-devtools-extension axios

Then create a store.js file under resources/js/superadmin/ folder with the following content.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducers from './reducers';
const store = createStore(reducers, composeWithDevTools(applyMiddleware(thunk)));

export default store;

Then update the app.js with the following content.

require('../bootstrap');

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Link } from 'react-router-dom'
import Routes from './routes';
import { Provider } from 'react-redux';
import store from './store';
import Axios from 'axios';

window.Axios = Axios;

class App extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <Router>
                    <div>
                        <Link to={'/'}>Dashboard</Link> |
                        <Link to={'/item-list'}>Items</Link>
                        <Routes />
                    </div>
                </Router>
            </Provider>
        )
    }
}

export default App;

if (document.getElementById('app')) {
    ReactDOM.render(
        <App />
        , document.getElementById('app'));
}

Then we need to create a folder to store actions. So we need to create a new action file called, resources/js/superadmin/actions/DashboardActions with the following content.

export const DASHBOARD_STARTING_FETCHING_METRICS = "(Dashboard) Start Fetching Metrics";
export const DASHBOARD_COMPLETE_FETCHING_METRICS = "(Dashboard) Complete Fetching Metrics";
export const DASHBOARD_CATCH_FETCHING_METRICS = "(Dashboard) Catch Fetching Metrics";

export const startFetchingMetrics = (data) => {
    return {
        type: DASHBOARD_STARTING_FETCHING_METRICS,
        payload: data
    }
}

export const completeFetchingMetrics = (data) => {
    return {
        type: DASHBOARD_COMPLETE_FETCHING_METRICS,
        payload: data
    }
}

export const catchFetchingMetrics = (data) => {
    return {
        type: DASHBOARD_CATCH_FETCHING_METRICS,
        payload: data
    }
}

Later you can update the content based on your requirements.

Then we need to create a new file for reducer called, resources/js/superadmin/reducers/DashboardReducer.js. Following is the dummy content.

import {
    DASHBOARD_CATCH_FETCHING_METRICS,
    DASHBOARD_COMPLETE_FETCHING_METRICS,
    DASHBOARD_STARTING_FETCHING_METRICS
} from '../actions/DashbiardActions';

const dashboardReducer = (state = { }, action) => {
    switch (action.type) {
        case DASHBOARD_CATCH_FETCHING_METRICS: {
            //@todo: update the state based on the requirements making sure you return the new instance of the state
        }

        //@todo: provide the implementation for other actions
    }

    return state;
}

export default dashboardReducer;

Then we create another file called, resources/js/superadmin/reducers/index.js with the following content.

import { combineReducers } from 'redux';
import DashboardReducer from './DashboardReducer';

export default combineReducers({
    dashboard: DashboardReducer
})

We update the Dashboard.js component with the following content to make use of Redux.

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { startFetchingMetrics, completeFetchingMetrics, catchFetchingMetrics  } from '../actions/DashboardActions';

class Dashboard extends React.Component {
    render() {
        //example. this.props.startFetchingMetrics()
        return <h3>Welcome to the Dashboard page.</h3>
    }
}

const mapStateToProps = state => {
    return state.dashboard;
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return bindActionCreators({
        startFetchingMetrics: startFetchingMetrics,
        completeFetchingMetrics: completeFetchingMetrics,
        catchFetchingMetrics: catchFetchingMetrics
    }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

That’s it. That is how we implement Redux.