baurine/redux_todo.html

## redux_todo.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script>
<body>
  <div id="root"></div>
</body>
</html>

## redux_todo.js
// works in jsbin.com

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ];
    case 'TOGGLE_TODO':
      return state.map((todo) => {
        if (todo.id != action.id) {
          return todo;
        }

        return {
          ...todo,
          completed: !todo.completed
        }
      });
    default:
      return state;
  }
}

const visibilityFilter = (state = 'SHOW_ALL', action) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter;
    default:
      return state;
  }
}

// how combineReducer works
/*
const todoApp = (state = {}, action) => {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  }
}
*/

const { combineReducers } = Redux;
// how combineReducers internal implement, it really work!
/*
const combineReducers = (reducers) => {
  return (state={}, action) => {
    return Object.keys(reducers).reduce(
      (nextState, key) => {
        nextState[key] = reducers[key](state[key], action);
        return nextState;
      },
      {}
    );
  }
};
*/

/*
const todoApp = combineReducers({
  todos: todos,
  visibilityFilter: visibilityFilter
});
*/
const todoApp = combineReducers({
  todos,
  visibilityFilter
});

const { createStore } = Redux;

const store = createStore(todoApp);

//////////////////////////////////

console.log(store.getState())

// 1.
console.log('Dispatch ADD_TODO');
store.dispatch({
  type: 'ADD_TODO',
  id: 0,
  text: 'Learn Redux',
});
console.log('current state:', store.getState());
console.log('------------------');

// 2.
console.log('Dispatch ADD_TODO');
store.dispatch({
  type: 'ADD_TODO',
  id: 1,
  text: 'Go Shopping',
});
console.log('current state:', store.getState());
console.log('------------------');

// 3.
console.log('Dispatch TOGGLE_TODO');
store.dispatch({
  type: 'TOGGLE_TODO',
  id: 1,
});
console.log('current state:', store.getState());
console.log('------------------');

// 4.
console.log('Dispatch SET_VISIBILITY_FILTER');
store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED',
});
console.log('current state:', store.getState());
console.log('------------------');
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script>
	<body>
	<div id="root"></div>
	</body>
	</html>
	// works in jsbin.com

	const todos = (state = [], action) => {
	switch (action.type) {
	case 'ADD_TODO':
	return [
	...state,
	{
	id: action.id,
	text: action.text,
	completed: false
	}
	];
	case 'TOGGLE_TODO':
	return state.map((todo) => {
	if (todo.id != action.id) {
	return todo;
	}

	return {
	...todo,
	completed: !todo.completed
	}
	});
	default:
	return state;
	}
	}

	const visibilityFilter = (state = 'SHOW_ALL', action) => {
	switch (action.type) {
	case 'SET_VISIBILITY_FILTER':
	return action.filter;
	default:
	return state;
	}
	}

	// how combineReducer works
	/*
	const todoApp = (state = {}, action) => {
	return {
	todos: todos(state.todos, action),
	visibilityFilter: visibilityFilter(state.visibilityFilter, action)
	}
	}
	*/

	const { combineReducers } = Redux;
	// how combineReducers internal implement, it really work!
	/*
	const combineReducers = (reducers) => {
	return (state={}, action) => {
	return Object.keys(reducers).reduce(
	(nextState, key) => {
	nextState[key] = reducers[key](state[key], action);
	return nextState;
	},
	{}
	);
	}
	};
	*/

	/*
	const todoApp = combineReducers({
	todos: todos,
	visibilityFilter: visibilityFilter
	});
	*/
	const todoApp = combineReducers({
	todos,
	visibilityFilter
	});

	const { createStore } = Redux;

	const store = createStore(todoApp);

	//////////////////////////////////

	console.log(store.getState())

	// 1.
	console.log('Dispatch ADD_TODO');
	store.dispatch({
	type: 'ADD_TODO',
	id: 0,
	text: 'Learn Redux',
	});
	console.log('current state:', store.getState());
	console.log('------------------');

	// 2.
	console.log('Dispatch ADD_TODO');
	store.dispatch({
	type: 'ADD_TODO',
	id: 1,
	text: 'Go Shopping',
	});
	console.log('current state:', store.getState());
	console.log('------------------');

	// 3.
	console.log('Dispatch TOGGLE_TODO');
	store.dispatch({
	type: 'TOGGLE_TODO',
	id: 1,
	});
	console.log('current state:', store.getState());
	console.log('------------------');

	// 4.
	console.log('Dispatch SET_VISIBILITY_FILTER');
	store.dispatch({
	type: 'SET_VISIBILITY_FILTER',
	filter: 'SHOW_COMPLETED',
	});
	console.log('current state:', store.getState());
	console.log('------------------');