I am practicing the react-redux. I wonder what is the difference between these two codes. I think these have same meaning, but the first code is not working well. The first one cannot deliver the props of the state. I removed the "import" part in this post
const TodosContainer = ({
input,
todos,
changeInput,
insert,
toggle,
remove
}) => {
return (<Todos
input={input}
todos={todos}
onChangeInput={changeInput}
onInsert={insert}
onToggle={toggle}
onRemove={remove} />);
};
// from this point, I changed this code into below one
const mapStateToProps = state => ({ // in this part, I think it cannot send props
input: state.todos.input,
todos: state.todos.todos
});
const mapDispatchToProps = dispatch => ({
changeInput: () => {
dispatch(changeInput());
},
insert: () => {
dispatch(insert());
},
toggle: () => {
dispatch(toggle());
},
remove: () => {
dispatch(remove());
}
});
export default connect(
mapStateToProps,
mapDispatchToProps)(TodosContainer);
export default connect(
({ todos }) => ({
input: todos.input,
todos: todos.todos,
}),
{
changeInput,
insert,
toggle,
remove,
}
)(TodosContainer);