Redux connect()higherordercomponent在传递动作创建器时不工作，引发mapDispatchToProps

flmtquvp 于 2022-11-12 发布在其他

关注(0)|答案(2)|浏览(104)

当使用mapDispatchToProps函数返回对象以传入连接HOC时，操作创建器在react-redux中不工作。当直接在连接HOC中传递操作创建器时，它在下面的内容中工作。无法理解差异。

不工作：

const mapDispatchToProps = () => {
        return {
            increment,
            decrement
        }
    }

const WrappedCounter = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(Counter);

工作中：

const WrappedCounter = ReactRedux.connect(mapStateToProps, {
        increment,
        decrement
    })(Counter);

详细代码：

<script type="text/babel" data-plugins="proposal-class-properties" data-presets="env,react">
// Action Creators - You don't need to change these
const increment = () => ({ type: 'increment' });
const decrement = () => ({ type: 'decrement' });

const Counter = (props) => {
    return (
        <div>
            <button className="increment" onClick={props.increment}>Increment</button>
            <button className="decrement" onClick={props.decrement}>Decrement</button>
            Current Count: <span>{props.count}</span>
        </div>
    );
};

const mapStateToProps = (state) => {
    return { count: state.count }
}

const mapDispatchToProps = () => {
    return {
        increment,
        decrement
    }
}

const WrappedCounter = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(Counter);

// Only change code *before* me!
// -----------

const store = Redux.createStore(Redux.combineReducers({
    count: (count = 0, action) => {
        if (action.type === 'increment') {
            return count + 1;
        } else if (action.type === 'decrement') {
            return count - 1;
        } else {
            return count;
        }
    }
}));

ReactDOM.render(
    <ReactRedux.Provider store={store}>
        <WrappedCounter />
    </ReactRedux.Provider>, 
    document.querySelector('#root')
);

redux

来源：https://stackoverflow.com/questions/74088965/redux-connect-higherordercomponent-not-working-while-i-pass-action-creater-thr

2条答案

按热度按时间

9q78igpj1#

写mapDispatchToProps有两种有效的语法，这里是这两种语法的组合，但对任何一种都不正确。

函数语法

mapDispatchToProps的“经典”（基本上已经过时）形式是一个函数，它将dispatch作为参数，并返回组件的属性。这些属性只是普通函数，因此它们需要自己调用dispatch。
它非常冗长，我不建议这样做：

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch(increment()),
    decrement: () => dispatch(decrement())
  }
}

对象语法

定义mapDispatchToProps最简单的方法是使用对象速记法，这里返回一个动作创建器函数的字典，react-redux句柄会自动将它们绑定到dispatch。
它看起来像这样：

const mapDispatchToProps = {
  increment,
  decrement
}

当使用此语法时，mapDispatchToProps不是函数，它只是一个对象。
在您的半工作解决方案中，您将mapDispatchToProps定义为函数，然后使用connect(mapStateToProps, mapDispatchToProps())(Counter)调用该函数，您使用了此语法，但多了一个步骤。您定义了一个返回对象的函数。然后调用该函数以获取对象。
使用钩子
最现代的编写方法是完全抛弃connect高阶组件，使用react-redux钩子。

const Counter = () => {
    const count = useSelector((state) => state.count);
    const dispatch = useDispatch();

    return (
        <div>
            <button className="increment" onClick={() => dispatch(increment())}>Increment</button>
            <button className="decrement" onClick={() => dispatch(decrement())}>Decrement</button>
            Current Count: <span>{props.count}</span>
        </div>
    );
};

赞(0）回复(0）举报 2022-11-12

voj3qocg2#

当我调用函数时，Below解决方案正在工作

const mapStateToProps = (state) => {
        return { count: state.count }
    }

    const mapDispatchToProps = () => {
        return {
            increment,
            decrement
        }
    }

const WrappedCounter = ReactRedux.connect(mapStateToProps, mapDispatchToProps())(Counter);

但我仍然有疑问
对于我在HOC中声明和放置状态，连接它可以正常工作，但mapDispatchToProps在不调用它情况下无法正常工作
mapStateToProps//刚刚通过悬挂夹具
mapDispatchToProps()//在这里我传递并调用函数

赞(0）回复(0）举报 2022-11-12

我来回答

Redux connect()higherordercomponent在传递动作创建器时不工作，引发mapDispatchToProps

2条答案

函数语法

对象语法

相关问题

热门标签

最新问答