[Redux] Extracting Action Creators

We will create an anction creator to manage the dispatch actions, to keep code maintainable and self-documenting by extracting action creators from the components.

let nextTodoId = 0;
const ACTION_CREATOR = {
addTodo: (text) => {
return {
type: 'ADD_TODO',
id: nextTodoId++,
text
}
},
setVisibilityFilter: (filter) => {
return {
type: 'SET_VISIBILITY_FILTER',
filter
}
},
toggleTodo: (id) => {
return {
type: 'TOGGLE_TODO',
id
}
}
}

Then update the dispatch function:

...

let AddTodo = ({ dispatch }) => {
let input;

return (
<div>
<input ref={node => {
input = node;
}} />
<button onClick={() => {
dispatch(ACTION_CREATOR.addTodo(input.value))
input.value = '';
}}>
Add Todo
</button>
</div>
);
};
AddTodo = connect()(AddTodo);

...
const mapDispatchToTodoListProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(ACTION_CREATOR.toggleTodo(id));
}
};
};

....
const mapDispatchToLinkProps = (
dispatch,
ownProps
) => {
return {
onClick: () => {
dispatch(ACTION_CREATOR.setVisibilityFilter(ownProps.filter))
}
}
}