React-Reduc 的连接不会将任何东西传回我的组件

Question

所以我对 React-Redux 的连接有点困惑，因为它似乎没有将任何东西传回我的组件。我整个上午都在尝试调试它，我看了一些教程，但看不出我做错了什么。下面是相关代码的片段。我是不是误解了 connect()？

const TodoList = (props) => {
    console.log(props); // Returns only an object with one property
                        // dispatch which holds a function.  Where        
                        // are my todos, filter, toggleTodo & removeTodo?
    return (
        <li> placeholder </li> 
    )
}

const RenderTodoGenerated = connect(
    todoStateToProps,
    todoDispatchToProps
)(TodoList);

const todoStateToProps = (state) => {
    return {
        todos: state.todos,
        filter: state.filter
    }
}

const todoDispatchToProps = (dispatch) => {
    return {
        toggleTodo: (toggleId) => {
            dispatch(toggleTodo(toggleId));
        },
        removeTodo: (removeId) => {
            dispatch(removeTodo(removeId));
        }
    } 
}

Answer 1

在 ES6 中，使用 const 声明的变量在声明它们的行之前不存在。您对 connect 的调用发生在 todoStateToProps 和 todoDispatchToProps 实际存在之前，因此此时它们是未定义的。您需要将对 connect 的调用移动到该代码块的末尾。

另外，仅供参考，connect 支持 "object shorthand" 来处理 mapDispatch 参数。你可以简单地传递一个充满动作创建者的对象作为第二个参数，而不是像你在那个例子中那样编写一个实际的函数，它们将被包裹在 dispatch 中。所以，您只需要：

const actionCreators = {toggleTodo, removeTodo};
const RenderTodoGenerated = connect(todoStateToProps, actionCreators)(TodoList);

React-Reduc 的连接不会将任何东西传回我的组件

React-Reduc's connect does not pass anything back to my component

redux

react-redux