Skip to content

Instantly share code, notes, and snippets.

@z2015
Created May 2, 2016 02:45
Show Gist options
  • Save z2015/ce0523ae9a73597a92fd5afd8d0f1304 to your computer and use it in GitHub Desktop.
Save z2015/ce0523ae9a73597a92fd5afd8d0f1304 to your computer and use it in GitHub Desktop.
Redux: Implementing combineReducers() from Scratch
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: !todo.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 = (reducers) => {
return ( state = {}, action) => {
return Object.keys(reducers).reduce(
(nextState, key) => {
nextState[key] = reducers[key](
state[key],
action
);
return nextState;
},
{}
);
};
};
const todoApp = combineReducers({
todos,
visibilityFilter
});
// const todoApp = (state = {}, action) =>{
// return {
// todos: todos(
// state.todos,
// action
// ),
// visibilityFilter: visibilityFilter(
// state.visibilityFilter,
// action
// )
// };
// };
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('Dispatch TOGGLE_TODO.');
store.dispatch({
type: 'TOGGLE_TODO',
id: 0
});
console.log('Current state:');
console.log(store.getState());
console.log('------------------------');
console.log('Dispatch SET_VISIBILITY_FILTER');
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
});
console.log('Current state:');
console.log(store.getState());
console.log('------------------------');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment