Не удается вытащить состояние из редукторного редуктора: «Не удается прочитать свойство« дорожки »из неопределенного»

Question

Я пытаюсь получить какое-то состояние из редукса, но получаю ошибку: не удается прочитать свойство 'дорожки' из неопределенного.Не уверен, откуда возникла ошибка.вот действие:

export const getTracks = () => dispatch => {
  axios
    .get("/api/tracks/all")
    .then(res =>
      dispatch({
        type: GET_TRACKS,
         payload: res.data
      })
    )
    .catch(err =>
      dispatch({
        type: GET_TRACKS,
        payload: null
     })
   );
 };

вот редуктор:

const initialState = {
  track: {}
};

 export default function(state = initialState, action) {
  switch (action.type) {
   case GET_TRACKS:
   return{
     ...state, 
     tracks: action.payload, 
     loading: false
   }
    default:
      return state;
  }
}

Вот компонент, из которого я пытаюсь вытащить состояние:

class Tracks extends Component {
  componentDidMount(){
    this.props.getTracks();
  }
  render() {
    const {tracks, loading} = this.props.track;
    let trackItems;
Tracks.PropTypes = {
  getTracks: PropTypes.func.isRequired, 
  track: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
  track: state.track
})

export default connect(mapStateToProps, {getTracks}) (Tracks);

Что-то новенькое в реагировании / избыточности, поэтому не уверен, что мне не хватает кода, чтобы показать полную проблему.

У меня открыты инструменты Chrome редукции, и я вижу, что состояние заполняется "дорожками" из Mlab, но не могу вытащить это состояние в компоненте дорожек с помощью этой строки:

   const {tracks, loading} = this.props.track;

Answer 1

У вас есть тип на вашем редукторе, основанный на вашем начальном состоянии prop

export default function(state = initialState, action) {
  switch (action.type) {
   case GET_TRACKS:
   return{
     ...state, 
     tracks: action.payload, // <--- should be track and not tracks
     loading: false
   }
    default:
      return state;
  }
}

Вам также понадобится доступ к ним внутри вашего рендера, например.

const {track, loading} = this.props.tracks; // Assuming you reducer is imported as tracks

Если вы планируетеиспользуйте множественное число

Редуктор дорожек:

const initialState = {
  tracks: {}
};

 export default function(state = initialState, action) {
  switch (action.type) {
   case GET_TRACKS:
   return{
     ...state, 
     tracks: action.payload, 
     loading: false
   }
    default:
      return state;
  }
}

Внутренние дорожки

class Tracks extends Component {
  ...
  render() {
    const {tracks: { tracks, loading }} = this.props;
    ...
  }
}

const mapStateToProps = state => ({
  tracks: state.tracks
})

Answer 2

Я считаю, что ошибка является орфографической ошибкой в ​​вашей функции mapStateToProps.Это должно быть state.tracks , а не state.track.

Это должно быть:

const mapStateToProps = state => ({
  track: state.tracks
})