Redux Counter

by Allie Yu

JavaScript

const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state;
  }
}

const Counter = ({
  value,
  onIncrement,
  onDecrement
}) => (
  <div>
    <h1>{value}</h1>
    <button onClick={onIncrement}>+</button>
    <button onClick={onDecrement}>-</button>
  </div>
)

const { createStore } = Redux
const store = createStore(counter)

const render = _ => {
  ReactDOM.render(
    <Counter 
      value={store.getState()}
      onIncrement = { () => {
      	return dispatch({type:'INCREMENT'})
      }}
      onDecrement = { () => {
      	return dispatch({type:'DECREAMENT'})
			}}
/*       onDecrement = { _ =>
                    store.dispatch({
                     type: 'DECREMENT'
                    })
      } */
      
/*       const mapDispatchToProps = dispatch => {
        return {
          Increase : () => {
            return dispatch({type:'INCREMENT'})
          }
          Decrease : () => {
            return dispatch({type: 'DECREAMENT'})
          }
        }
      } */
      />,
    document.getElementById('root')
  )
}

store.subscribe(render)
render()
/*

// A look inside the createStore function

const createStore = reducer => {
  let state;
  let listeners = []
  
  const getState = _ => state
  
  const dispatch = (action) => {
    state = reducer(state, action)
    listeners.forEach(listener => listener())
  }
  
  const subscribe = (listener) => {
    listeners.push(listener);
    return _ => {
      listeners = listeners.filter(l => l !== listener)
    }
  }
  
  dispatch({});
  
  return { getState, dispatch, subscribe }
}
*/

expect(
  counter(0, { type: 'INCREMENT'})
).toEqual(1);

expect(
  counter(1, { type: 'DECREMENT'})
).toEqual(0);

console.log('Tests Passed!')