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到该代码块的末尾。

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

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

React-Reduc的连接不会将任何内容传递回我的组件

1 个答案: