Question

关于dispatch()函数的问题，因此我们通常将代码编写如下：

const store = () => {
    const store = createStore(
        combineReducers({
            expenses: expensesReducer,
            filters: filtersReducer
        })
    );
    return store;
};
store.dispatch(...); // passing an action object

但是如果我们使用'connect'连接一个组件，并且在该组件内部，我们可以这样编码：

props.dispatch(...);

我了解派遣已传递到组件，但道具不是商店的事实，那么您怎么能像props.dispatch(...);一样？那个dispatch（）方法不是只能在'store'对象上使用吗？

Answer 1

以下是项目外观的示例

component.js


import { connect } from 'react-redux';



import { login } from './actions';


const Component = ({name, loginAction}) => {

    return <div onClick={loginAction}>login</div>;

}

const mapStateToProps = state => ({
  name: state.user.name
});

const mapDispatchToProps = {
  loginAction: login
};

export default connect(mapStateToProps, mapDispatchToProps)(Component);

action.js

export const loggedIn = payload => ({ type: "LOGIN_USER", payload });

export const login = () => dispatch =>  dispatch(loggedIn(true));

当mapDispatchToProps时，动作将收到调度。您不必做任何特别的事情。只需包含您的操作，然后redux该库将为您做其他一切。

编辑：您根本不需要调度。这应该可以更新商店。

action.js


export const login = payload => ({ type: "LOGIN_USER", payload });

Answer 2

当您使用Redux中的connect将组件绑定到store时，dispatch方法已连接到store

您的mapDispatchToProps函数应返回一个对象。该对象的每个字段都应该是一个函数，该函数应调用以便将操作分派给商店。

Redux documentation about matchDispatchToProps

我希望回答您的问题，如何在组件中获取调度方法或存储。

在组件中使用分派

2 个答案: