Add Redux,React Redux Router to Reactjs app Create-react-app

Basic steps to add Redux into your React app created by https://github.com/facebookincubator/create-react-app

Videos:

Step 1: Install Create-react-app

Install https://github.com/facebookincubator/create-react-app package as global using this command in your terminal

npm install -g create-react-app

Step 2: Create new app use create-react-app

create-react-app my-app
cd my-app/
npm start

Step 3: Delete all files in /src

src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Step 4: Install packages

In root of your app install extra packages by type following command in your terminal.

npm install -save react-router react-router-dom redux react-redux redux-thunk

Step 5: Create Store.js

From root of our app create: src/store.js

import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory';
import {routerMiddleware} from 'react-router-redux'
import rootReducer from './modules'

export const history = createHistory()
const initialState = {};
const enhancers = [];
const middleware = [
    thunk,
    routerMiddleware(history)
];

if (process.env.NODE_ENV === 'development') {
    const devToolsExtension = window.devToolsExtension

    if (typeof devToolsExtension === 'function') {
        enhancers.push(devToolsExtension())
    }
}

const composedEnhancers = compose(
    applyMiddleware(...middleware),
    ...enhancers
);

const store = createStore(
    rootReducer,
    initialState,
    composedEnhancers
);

export default store

Step 6: Create /src/modules/app.js

export const SAY_HELLO = 'app/hello';
const initState = {
    title: '',
}
export default (state = initState, action = {}) => {
switch (action.type) {
case SAY_HELLO:
return {
                ...state,
                title: action.payload
            }
default:
return state;
    }
}
export const sayHello = () => {
return dispatch => {
dispatch({
            type: SAY_HELLO,
            payload: 'Hello World'
        })
    }
}

Step 7: Create /src/modules/index.js

import {combineReducers} from 'redux'
import app from './app'
export default combineReducers({
    app
})

Step 8: Create /src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

import Layout from './layout'
render(<Provider store={store}>
    <Layout />
</Provider>, document.getElementById('root'));
registerServiceWorker();

Step 8: Create layout /src/layout/index.js

import React,{Component} from 'react'
import Home from '../pages/home'
import {Router,Route, Switch} from 'react-router-dom'
import {history} from '../store'
class Layout extends Component{
constructor(props){
        super(props)
    }
render(){
return (
            <div className={'app-layout'}>
                
                <Router history={history}>
                    <Switch>
                        <Route exact path={'/'} component={Home}/>
                    </Switch>
                </Router>
             </div>
        )
  }
}
export default Layout;

Step 9 : Home page component

create file /src/pages/home.js

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {sayHello} from '../modules/app';
export class Home extends Component {
render() {
        const {app} = this.props;
return <div className="app-home-page">
                <h1>Home works!</h1>
                <p>{app.title}</p>
                <button onClick={() => {
                    sayHello();
}}>Click</button>
        </div>
    }
}
const mapStateToProps = state => ({
    app: state.app,
});
const mapDispatchToProps = dispatch => bindActionCreators({
    sayHello
}, dispatch);
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Home)

I ‘m going to implement Redux to my existing File Sharing Reactjs tutorial : https://hackernoon.com/learn-react-node-though-making-real-file-sharing-web-application-fb1d9e551b97