React - Redux - this.props возвращает всегда неопределенное

Question

У меня есть следующий код

магазин / index.js

const DEFAULT_STATE = {
    auth: { isAuthenticated: false },
    error: { message: null },
    tracks: [],
    uploadedTrack: {}
};

магазин / редукторы / index.js

import auth from './auth';
import error from './error';
import {tracks, uploadedTrack} from './tracks';

export default combineReducers({
    auth,
    tracks,
    uploadedTrack,
    error
});

магазин / редукторы / tracks.js

import {UPLOADED_TRACK, SET_CURRENT_USER_TRACK} from '../actionTypes';

export const tracks = (state = [], action) => {
    switch(action.type) {
        case SET_CURRENT_USER_TRACK:
            return action.tracks;
        default:
            return state;
    }
}

export const uploadedTrack = (state = {}, action) => {
    switch(action.type) {
        case UPLOADED_TRACK:
            return action.track;
        default:
            return state;
    }
};

магазин / действия / tracks.js

export const setTrack = tracks => ({
    type: SET_CURRENT_USER_TRACK,
    tracks
});

export const setUploadedTrack = track => ({
    type: UPLOADED_TRACK,
    track
});

export const getUserTrack = () => {
    return async dispatch => {
        try {
            const {token, ...tracks} = await api.call('get', 'tracks/user');

            dispatch(setTrack(tracks));
            dispatch(removeError());
        } catch (err) {
            const {error} = err.response.data;
            dispatch(addError(error.message));
        }
    };
};

компоненты / trackList.jsx

componentDidMount() {
        const {getUserTrack} = this.props;
        getUserTrack();
    }

render() {
        var {authType} = this.props;
        const {auth} = this.props;
        const {tracks} = this.props;

        console.log("Track: ", tracks)

Кажется, все работает, потому что мои «дорожки» в магазине Redux содержат мой список из шести дорожек, но когда я пытаюсь распечатать эту информацию из переменной «дорожки» на консоли, эта печать «undefined». Странно то, что мой «звонок» на консоли содержит мои шесть треков ... Вы можете мне помочь? Я не знаю, где мои ошибки, я пытаюсь применить решения, найденные в Интернете, но ничего не получается.

Answer 1

Можете ли вы показать, как вы сопоставляете свое состояние притока с вашим компонентом? Если в вашем магазине избыточного хранилища есть шесть треков, но вы не можете отобразить их в своем компоненте реагирования, проблема, вероятно, заключается в том, как вы привязываете свой магазин к своему компоненту (когда вы вызываете метод connect () в вашем components/trackList.jsx).