Почему я не могу передать "directory" как компонент prop?

Question

Я пытаюсь передать реквизит из container.js в flow.js. Это хорошо с корзиной, оформить заказ и реквизиты пользователя. Но реквизит каталога не передается. Как я могу это исправить? Единственное, что я могу редактировать, это мой компонент и json. Не контейнер или поток.

Мой компонент:

<Container directory={directoryVar} checkout={checkout} cart={cart} user={user} />

Мой const directoryVar:

const directoryVar = {
    countries: [
        {
            id: "AD",
            two_letter_abbreviation: "AD",
            three_letter_abbreviation: "AND",
            full_name_locale: "Andorra",
            full_name_english: "Andorra"
        },
        {
            id: "AE",
            two_letter_abbreviation: "AE",
            three_letter_abbreviation: "ARE",
            full_name_locale: "United Arab Emirates",
            full_name_english: "United Arab Emirates"
        }]};

container.js выглядит следующим образом. В нем есть значения, когда я console.log его перед экспортом. После экспорта значения исчезают.

import { connect } from 'src/drivers';

import {
    beginCheckout,
    cancelCheckout,
    submitOrder,
    submitPaymentMethodAndShippingAddress,
    postAddressInformation,
    submitShippingAddress,
    submitBillingAddress,
    getStreetByPostCodeNLApi,
    setTotalsAreLoading
} from 'src/actions/checkout';

import Flow from './flow';

const mapStateToProps = ({ cart, checkout, directory, user }) => {
    console.log(user,directory);
    return {
        cart,
        checkout,
        directory,
        user
    };
};

const mapDispatchToProps = {
    beginCheckout,
    cancelCheckout,
    submitOrder,
    submitPaymentMethodAndShippingAddress,
    postAddressInformation,
    submitShippingAddress,
    submitBillingAddress,
    getStreetByPostCodeNLApi,
    setTotalsAreLoading
};

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

Flow.js выглядит следующим образом:

const isCheckoutReady = checkout => {
    const {
        billingAddress,
        paymentData,
        shippingAddress,
        shippingMethod
    } = checkout;

    const objectsHaveData = [
        billingAddress,
        paymentData,
        shippingAddress
    ].every(data => {
        return !!data && !isObjectEmpty(data);
    });

    const stringsHaveData = !!shippingMethod && shippingMethod.length > 0;

    return objectsHaveData && stringsHaveData;
};

/**
 * This Flow component's primary purpose is to take relevant state and actions
 * and pass them to the current checkout step.
 */
const Flow = props => {
    const {
        // state
        cart,
        checkout,
        user,
        directory,

        // actions
        cancelCheckout,
        submitShippingAddress,
        submitOrder,
        submitPaymentMethodAndShippingAddress,
        postAddressInformation,
        submitBillingAddress,
        setStepNumber,
        getStreetByPostCodeNLApi,
        setTotalsAreLoading
    } = props;

Вывод из console.log:

{} {user:...}

Answer 1

Кажется, вы смешиваете stateProps и ownProps. Чтобы понять это, давайте посмотрим на сигнатуру функции mapStateToProps из документов: https://react -redux.js.org / using-Reaction-redux / connect-mapstate # defining-mapstatetoprops

function mapStateToProps (state, ownProps?)

Первый аргумент, переданный этой функции, - это ваше состояние Redux, а вторым аргументом, переданным этой функции, являются фактические props, переданные этому компоненту.

Вы используете свой Контейнерный компонент, как показано ниже:

<Container directory={directoryVar} checkout={checkout} cart={cart} user={user} />

Таким образом, в действительности вы передаете реквизиты с именами directory, checkout, cart и user, они вашипередано в props контейнеру.

Используя приведенный ниже фрагмент кода, вы можете видеть, что вы получаете directory, checkout, cart и user из state и игнорируетето, что передается в качестве реквизита для вашего Container компонента, который использует те же имена реквизитов, что и в вашем штате.

const mapStateToProps = ({ cart, checkout, directory, user }) => {
    console.log(user,directory);
    return {
        cart,
        checkout,
        directory,
        user
    };
};

Чтобы использовать переданный в реквизитах, вы должны использовать еговот так:

const mapStateToProps = (stateProps, ownProps) => {
    return {
       ...ownProps
    };
};

Теперь предположимвы также хотите использовать дополнительную поддержку company из вашего state приложения и передать ее базовому компоненту Flow, тогда вы будете использовать его, как показано ниже:

const mapStateToProps = ({ company } , ownProps) => {
    return {
       company,
       ...ownProps
    };
};

Answer 2

Я думаю, что вы неправильно понимаете, как использовать Redux. Значения, которые вы передаете через реквизиты в компоненте, хороши.

Но значения, которые вы хотите получить в mapStateToProps, должны быть получены из хранилища приставок.

Так, например, у вас естьредуктор с именем user, у которого есть массив с именем data.

Ваш mapStateToProps будет выглядеть примерно так:

mapStateToProps = state => {
  return {
    userData: state.user.data
  }
};