Redux Boiler Plate

MimimalReduxSetup.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

class App extends React.Component{
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <div className="container">
        Please check the <b>Console Tab</b> of Devtools.
      </div>
    )
  }
}

export default App;

// Reducer
const reducer = function(state=[],action){
  if (action.type === 'INC'){
    return [
        ...state,
        {
          id: action.payload.id,
          name: action.payload.name,
          age: action.payload.age
        }
      ]
  } else {
    return state;
  }
}

// Store
let store = createStore(reducer, 0);

store.subscribe(() => {
  console.log("store changed : ", store.getState());
})

// Action
store.dispatch({
  type:"INC",
  payload: {
    id: 0,
    name: "Siva",
    age: 25
  }
});

store.dispatch({
  type:"INC",
  payload: {
    id: 1,
    name: "Siraj",
    age: 14
  }
});

store.dispatch({
  type:"INC",
  payload: {
    id: 2,
    name: "John",
    age: 27
  }
});

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, 
  document.getElementById('root')
);