Можно ли получить доступ к действиям, отправленным с использованием mapDispatchToProps, в любом компоненте или просто в компоненте mapDispatchToProps

Question

Когда мы пишем mapDispatchToProps в любом компоненте, я знаю, что мы можем вызвать / отправить действие, используя this.props.action() в том же компоненте - но мой запрос заключается в том, нужно ли мне вызывать / отправлять одно и то же действие / ии (для которогоЯ написал mapDispatchToProps в некотором компоненте) в каком-то другом компоненте, нужно ли мне снова писать mapDispatchToProps или есть какой-то способ, которым я могу написать mapDispatchToProps только один раз, а затем использовать this.props.action () в любом компоненте

Answer 1

Действительно возможно сделать и то и другое, т.е. подключить компоненты напрямую, чтобы явно хранить или получать реквизиты от родительских компонентов.

• Подключение компонентов непосредственно к магазину

class Foo extends React.Component {
    render() {
        const { email } = this.props;

        return (
            <div>
                <p>{email}</p>
                <Baz />
            </div>
        )
    }
}

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

export default connect(mapStateToProps)(Foo);

class Baz extends React.Component {
    render() {
        const { action } = this.props;

        return (
            <button onClick={action}>Call me!</button>
        )
    }
}

const mapDispatchToProps = {
    action
};

export default connect(null, mapDispatchToProps)(Foo);

• Получение реквизитов от родителя

class Foo extends React.Component {
    render() {
        const { action, email } = this.props;

        return (
            <div>
                <p>{email}</p>
                <Baz action={action} />
            </div>
        )
    }
}

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

const mapDispatchToProps = {
    action
};


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

class Baz extends React.Component {
    render() {
        const { action } = this.props;

        return (
            <button onClick={action}>Call me!</button>
        )
    }
}

export default Baz;

Answer 2

Если ваши же компоненты управляются родительским компонентом, вы можете создать контейнер для переноса некоторого дочернего компонента. Контейнер будет подключаться к редуксу и отправке определенных функций, получать состояние из хранилища, а затем передавать их в дочерние компоненты следующим образом:

Class Container extends React.Component {
    render() {
        return (
            <div>
                <Child1 state1={this.props.state1} action1={this.props.action1} />
                <Child2 state1={this.props.state2} action1={this.props.action2} />
            </div>
        )
    }
}

const mapStateToProps = state => ({
   state1: state.state1,
   state2: state.state2,
})
const mapDispatchToProps = dispatch => ({
   action1: dispatch({type: ..., payload: ...}),
   action2: dispatch({type: ..., payload: ...})
})
export default connect(mapStateToProps, mapDispatchToProps)(Container)

В противном случае, я рекомендую вам определить mapDispatchToProps в каждом компоненте

Answer 3

Вы всегда можете передать действие дочернему компоненту с помощью реквизита, в противном случае я считаю, что вам придется отображать MapDispatchToProps в каждом компоненте