Skip to content

Instantly share code, notes, and snippets.

@TimCodes

TimCodes/todoReducer.js

Created February 16, 2017 00:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save TimCodes/a778386acdc646cae43118907ced3650 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save TimCodes/a778386acdc646cae43118907ced3650 to your computer and use it in GitHub Desktop.
Download ZIP
todoReducerExample
Raw
todoReducer.js
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false
};
case 'TOGGLE_TODO':
if (state.id !== action.id) {
return state;
}
return {
...state,
completed: !state.completed
};
default:
return state;
}
};
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todo(undefined, action)
];
case 'TOGGLE_TODO':
return state.map(t => todo(t, action));
default:
return state;
}
};
const visibilityFilter = (
state = 'SHOW_ALL',
action
) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
};
const { combineReducers } = Redux;
const todoApp = combineReducers({
todos,
visibilityFilter
});
const { createStore } = Redux;
const store = createStore(todoApp);
console.log('Initial state:');
console.log(store.getState());
console.log('--------------');
console.log('Dispatching ADD_TODO.');
store.dispatch({
type: 'ADD_TODO',
id: 0,
text: 'Learn Redux'
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------');
console.log('Dispatching ADD_TODO.');
store.dispatch({
type: 'ADD_TODO',
id: 1,
text: 'Go shopping'
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------');
console.log('Dispatching TOGGLE_TODO.');
store.dispatch({
type: 'TOGGLE_TODO',
id: 0
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------');
console.log('Dispatching SET_VISIBILITY_FILTER');
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------');
const testAddTodo = () => {
const stateBefore = [];
const action = {
type: 'ADD_TODO',
id: 0,
text: 'Learn Redux'
};
const stateAfter = [
{
id: 0,
text: 'Learn Redux',
completed: false
}
];
expect(
todos(stateBefore, action)
).to.eql(stateAfter);
};
const testToggleTodo = () => {
const stateBefore = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: 'Go Shopping',
completed: false
}
];
const action = {
type: 'TOGGLE_TODO',
id: 1,
};
const stateAfter = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: 'Go Shopping',
completed: true
}
];
expect(
todos(stateBefore, action)
).to.eql(stateAfter);
};
testAddTodo();
testToggleTodo();
console.log("Test passed")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment