Skip to content

Instantly share code, notes, and snippets.

@TapaniAla

TapaniAla/Redux15: Reducer composition with combineReducers()

Last active June 8, 2017 05:14
Show Gist options
  • Save TapaniAla/0676f626b5d34dd1e9700c7847e8fb47 to your computer and use it in GitHub Desktop.
Save TapaniAla/0676f626b5d34dd1e9700c7847e8fb47 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source http://jsbin.com/zugupol
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://wzrd.in/standalone/expect@latest"></script>
<script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script>
</head>
<body>
</body>
</html>
Raw
Redux15: Reducer composition with combineReducers()
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;
}
//...state doesn't work?
return Object.assign({}, 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 todoApp = (state = {}, action) => {
// return {
// todos: todos(
// state.todos,
// action),
// visibilityFilter: visibilityFilter(
// state.visibilityFilter,
// action
// )
// };
// };
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('Initial state:');
console.log(store.getState());
console.log('--------------');
console.log('Dispatching TOGGLE_TODO.');
store.dispatch({
type: 'TOGGLE_TODO',
id: 1,
text: 'Go Shopping'
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------');
console.log('Initial 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('--------------');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment