Это плохая практика для прямого импорта действий в компоненты?

Question

Это что-то вроде плохой практики?

SendInfoButton.js

import React from 'react';
import { sendInfo } from '../actions/index';

export const SendInfoButton = ({currentUser}) => (
    <div>
        <button onClick={() => sendInfo(currentUser)} />
    </div>
)

actions / index.js

import { store } from '../reducers/index';
import { SEND_INFO } from '../constants/index;

export const sendInfo = (currentUser) => store.dispatch({type: SEND_INFO, payload: currentUser})

Кажется более эффективным импортировать действия напрямуютаким образом, в отличие от использования mapDispatchToProps и передачи действий компонентам, которые их не используют.Я также более склонен импортировать подобные действия, потому что у меня уже есть компоненты с большим количеством реквизитов, и я бы не стал добавлять к этому.

Answer 1

Импортировать создателя действия, например import { sendInfo } from '../actions/index';, можно - вот как вы должны это делать.

Однако затем вы должны использовать connect, чтобы «связать» создателей действий, чтобы они обращались к нужному экземпляру хранилища во время выполнения и автоматически отправляли действие. Это можно сделать короче, используя синтаксис «сокращение объекта» - просто передайте объект, полный создателей действия, в качестве второго аргумента connect, например:

export default connect(null, {sendInfo})(SendInfoButton);

Аналогично, вы не должны импортировать магазин напрямую . Как сказал @estes, это все время блокирует ваш код в одном и том же «производственном» хранилище и усложняет его тестирование или повторное использование.