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);