Kocidux structure

containers_App.js

// import react and router
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import Home from './Home'

export default class App extends Component {
  render() {
    return (
      <div>
        {/* this is how you add comments inside react render function -> jsx */}
      
        {/* our default client-side route */}
        <Route exact path="/" component={Home} />
      </div>
    );
  }
}

containers_Home.js

// import react, fakeLogin function and connect
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fakeLogin } from '../modules/user';

// can also create UI in components/Home...

const UI = ({ user, fakeLogin }) =>
  <div>
    {!user.isAuthenticated ?
      <div>
        <button onClick={fakeLogin}>
          Login
        </button>
      </div> :
      <div>
        You are authenticated {user.name}
      </div>
    }
  </div>

export default connect(({ user }) => ({ user }), {
  fakeLogin
})(UI)

index.js

// entry

// import react
import React from 'react';
import { render } from 'react-dom';
// import react-redux's Provider which will allow us to pass redux store to components via connect()
import { Provider } from 'react-redux';
// import React-Router-Redux for routing
import { ConnectedRouter as Router } from 'react-router-redux';
// import function for creating browser history
import createHistory from 'history/createBrowserHistory';
// import our createStore function from store folder
import createStore from './store';
// import Entry App point of our app
import App from './containers/App';

// create history
const history = createHistory();
// get rendering element
const el = document.getElementById('root');

// create store with our history
const store = createStore(history);

// render our app to DOM
render(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  el
);

modules_index.js

// import combine from redux
import { combineReducers } from 'redux';
// import router reducer
import { routerReducer } from 'react-router-redux';
// import our user reducer
import user from './user';

export default combineReducers({
  user,
  router: routerReducer
});

modules_user.js

const USER_LOGGED_IN = 'app/user/USER_LOGGED_IN'
const USER_LOGGED_OUT = 'app/user/USER_LOGGED_IN'

const initialState = {
  name: null,
  avatar: null,
  rank_group: null,
  points: null,
  isAuthenticated: false
}

export default function user (state = initialState, action) {
  switch (action.type) {
    case USER_LOGGED_IN:
      return {
        ...state,
        isAuthenticated: true,
        ...action.payload
      }
    
    case USER_LOGGED_OUT:
      return initialState
      
    default:
      return state
  }
}

export function fakeLogin {
  return {
    type: USER_LOGGED_IN,
    payload: {
      name: 'Koci',
      avatar: '//placecage.com/200/200',
      rank_group: 5,
      points: 1341
    }
  }
}

store_index.js

// import core from redux
import { createStore, applyMiddleware, compose } from 'redux';
// import routerMiddleware rr-redux5
import { routerMiddleware } from 'react-router-redux';
// import thunk middleware
import thunk from 'redux-thunk';
// import our rootReducer
import reducers from '../modules';

// we get history from entry file
export default history => {
  // redux-devtools
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ||
    compose;

  // middlewares array
  const middleware = [routerMiddleware(history), thunk];

  // prod/dev middlewares obj
  const middlewares = process.env.NODE_ENV === 'production'
    ? applyMiddleware(...middleware)
    : composeEnhancers(applyMiddleware(...middleware));

  // create store with our reducers and middlewares obj
  const store = createStore(reducers, middlewares);

 /* You don't need to care about this at this time, but you will love it after learning react and redux.
  if (module.hot) {
    module.hot.accept('../modules', () => {
      const nextRootReducer = require('../modules').default;
      store.replaceReducer(nextRootReducer);
    });
  }
 */

  // and return our store at the end
  return store;
};