const add = (a, b) => {
  return a + b ;
}

const b;
const add = (a) => {
  return a + b ;
}

const add = (a, b) => {
  console.log('impure');
  return a + b ;
}

const add = (a, b) => {
  Api.post('/add', { a,b }, (response) => {
    // Do something.
  });
  return a + b ;
}

// Mutate arrays and objects is also impure.

// all data structures in js are mutables, except strings,
// cuz usually use immutable.js, mori, etc.

const original = { a: 1, b:2 };
const extension = { c: 3 };
const copy = Object.assign({}, original); // will merge both objects
const copyMultiple = Object.assign({}, original, extension); // will merge both objects
// when your use empty object in first prop, will get effectively copy

// with babel or modern browsers
const original = { a: 1, b:2 };
const extension = { c: 3 };
const copy = {...original};
const copyMultiple = {...original, ...extension};


// copy array
const original = [1, 2, 3];
const copy = original.slice(); // get back a new array

// copy array
const original = [1, 2, 3];
const copy = [ ...original ] // get back a new array


// array.push will add stuff an arrat but it mutates the array.
// array.push is 945 times faster than array.concat but tough, we need immutable data structures.

// extend array
const original = [1, 2, 3];
const extended = original.concat(4);
const moreExtended = original.concat([4,5]);

// extend array
const original = [1, 2, 3];
const extended = [ ...original, 3 ,4 ];
const moreExtended = [ ...original, ...extended ];

import { applyMiddleware } from 'redux';

const logger = ({ getState }) => {
  return next => action => {
    console.log('MIDDLEWARE', getState(), action);
    const value = next(action); // because you can chain multiple middleware together
    return value;
  }
};

const secondStore = createStore(reducer, applyMiddleware(logger));

import { bindActionCreator } from 'redux';
import { bindActionCreators } from 'react-redux';

const addAction = {
  type: 'ADD',
  payloud: {
    amount: 4
  }
};

const createAddAction = (amount) => {
  return {
    type: 'ADD',
    payloud: {
      // amount: amount
      amount
    }
  }
}
createAddAction(4);

const handrolledDispatch = store.dispatch(createAddAction(4));
const dispatchAdd = bindActionCreator(createAddAction, store.dispatch);

// bindActionCreators from react-redux, takes a bunch of these actions, like an object of them and binds them all with the same dispatch.
// you could write your own.
const bindActionCreators = (actions, dispatch) => {
  return Object.keys(actions).reduce((boundActions, key) => {
    boundActions[key] = bindActionCreator(actions[key], dispatch)
  }, {}); // the second array is for start with empty object
}

import { combineReducers } from 'redux';

const calculatorReducer = (state, action) => {
  return state;
};
const errorMessageReducer = (state, action) => {
  return state;
};

const reducer = combineReducers({
  calculator: calculatorReducer,
  error: errorMessageReducer
});

console.log(reducer); // function combination()
// Does i'ts like compose, they return completely separate.
// multiples functions with different parts of this state object

import { compose } from 'redux';

const makeLouder = (string) => string.toUpperCase();
const repeatThreeTimes = (string) => string.repeat(3);
const embolden = (string) => string.bold();

const makeLouderAndBoldAndRepeatThreeTimes = compose(embolden, repeatThreeTimes, makeLouder);

makeLouderAndBoldAndRepeatThreeTimes('xd'); // "<b>XDXDXD</b>"

import { createStore } from 'redux';

createStore(); // Error, expected the reducer to be a function
createStore(() => {}); // works

// reducer is a function then get current state of app, an action and return a new state
const reducer = (state, action) => {
  return state;
};

const store = createStore(reducer);
console.log(store);
console.log(Object.keys(store)); // ['dispatch', 'subscribe', 'getState', replaceReducer']
// dispatch used to dispatch actions to change the state
// subscribe fires an event every time the state of the world changes // used in SSR to update UI but react-redux can handle this for you
// getState wanna go return current state of the world
// replaceReducer you give it a new function, it replaces the reducer // code splitting

const reducer = (state = {value: 1}, action) => {
  return state;
};

const store = createStore(reducer);
console.log(store.getState()); // [object Object] { value: 1}

class NewItem extends Component {
  state = {value: ''};
  handleChange = event => {
    const value = event.target.value;
    this.setState({value});
  }
  handleSubmit = event  => {
    const { onSubmit } = this.props;
    const { value } = this.state;

    event.preventDefault();

    onSubmit({value, packed: false, id: uniqueId()});
    this.setState({value: ''});
  };
  render() {...}
}

// This is not an epic
const pingPong = (action, store) => {
  if (acion.type === 'PING') {
    return {
      type: 'PONG'
    };
  }
}

// this is what it looks like in an epic.
const pingPongEpic = (action$, store) =>
  action$.ofType('PING')
    .map(action => ({ type: 'PONG' }));

function definitelyNotAThunk() {
  return function aThunk() {
    console.log('Hello, Im a Thunk.');
  }
}