kishanio

// Dependency : http://redux.js.org/ 

import { createStore, applyMiddleware } from 'redux';
import todoApp from './reducers';
// both promise and logger are middleware fucntion. See implementation here, https://egghead.io/lessons/javascript-redux-the-middleware-chain
import promise from 'redux-promise';
import logger from 'redux-logger';

const configureStore = () => {
  // creating array of middleware

kishanio

// Dependency : http://redux.js.org/ 
// Dependency : https://egghead.io/lessons/javascript-redux-the-middleware-chain
// following store resolves promises before by injecting middlewares to store dispatch.

const promise = (store) => (next) => (action) => {
  if ( typeof action.then === 'function' ) {
    return action.then(next);
  }
  return next(action);
};

kishanio

// group 

const testConsole = { "abc" : "abc", "def" : "def", "jkl" : "jkl" };
console.group("Group Console");
console.log(testConsole);
console.groupEnd("Group Console");

// colours 
console.log("%c test", "color: red");

kishanio

const mapDispatchToProps = (dispatch) => ({
  onTodoClick(id) {
    dispatch(toggleTodo(id));
  },
});

const VisibleTodoList = withRouter( connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList) );

kishanio

// Reference : https://www.sitepoint.com/currying-in-functional-javascript/

var greetCurried = function(greeting) {
  return function(name) {
    console.log(greeting + ", " + name);
  };
};

var greetHello = greetCurried("Hello");

kishanio

// Dependency : https://github.com/reactjs/react-redux

// Writing a container to pass todos & onTodoClick as Props to child. 
// We needed this container in order to subscribe and unsubscribe to state. 
class VisibleTodoList extends Component {
  componentDidMount() {
    const { store } = this.context; 
    this.unsubscribe = store.subscribe( () => this.forceUpdate() );
  }

kishanio

var someArr = [10, 5, 3, 55]; 
console.log( someArr.filter( e => e > 5 )); // [10,55]

kishanio

// Dependecy : https://facebook.github.io/react/

const { Component } = React; 

class App extends Component {
  
  constructor() {
    super();
    
    this.state = { a: "",b : ""};

kishanio

// normal function defination 
const someFunction = ( someArg, someArgDef = "Default Arg" ) => {
  return someArg + " " + someArgDef;
}

console.log( someFunction( "Some Argument" ) );

// single line single argument short hand 
const arr = ["a", "b", "c"];
const newArr = arr.map(a=>a);

kishanio

// Reference : https://egghead.io/lessons/javascript-redux-implementing-combinereducers-from-scratch

const combineReducers = (reducers) => {
  return ( state = {}, action) => {
      const keys = Object.keys(reducers); 
      const arr = keys.reduce((accumulator, key) => {
        // since accumulator is created inside reducer function we don't have to worry about if it's mutable or not.
        // reducer still stays as a pure function.
        accumulator[key] = reducers[key](state[key],action);
        return accumulator;