Redux: не могу использовать магазин

Question

У меня есть эта ошибка при использовании Redux:

"Uncaught TypeError: Невозможно прочитать свойство 'props' of undefined"

Когда я не использовал выборку Метод в проекте все работало. Затем я добавил в проект получение данных (заметок) с другого сайта, и все перестало работать

Мой редуктор:

 export function itemsHasErrored(state = false, action) {
  if (action.type === 'ITEMS_HAS_ERRORED') {
    return action.hasErrored;
  } else {
    return state;
  }
}

export function itemsIsLoading(state = false, action) {
  if (action.type === 'ITEMS_IS_LOADING') {
    return action.isLoading;
  } else {
    return state;
  }
}

export function getNotesReducer(state = [], action) {
  if (action.type === 'ITEMS_FETCH_DATA_SUCCESS') {
    return action.notes;
  } else {
    return state;
  }
}

Мои действия:

export function itemsHasErrored(bool) {
  return {
    type: 'ITEMS_HAS_ERRORED',
    hasErrored: bool,
  }
}

export function itemsIsLoading(bool) {
  return {
    type: 'ITEMS_IS_LOADING',
    isLoading: bool,
  }
}

export function itemsFetchDataSuccess(notes) {
  return {
    type: 'ITEMS_FETCH_DATA_SUCCESS',
    notes,
  }
}

export function itemsFetchData(url) {
  return (dispatch) => {
    dispatch(itemsIsLoading(true));

    fetch(url)
        .then((response) => {
          if (!response.ok)
            throw Error(response.statusText);
          dispatch(itemsIsLoading(false));
          return response;
        })
        .then((response) => response.json())
        .then((notes) => dispatch(itemsFetchDataSuccess(notes)))
        .catch(() => dispatch(itemsHasErrored(true)));
  };
}

Мой магазин :

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "../reducers/rootReducer";

export default function configureStore(initialState) {
  return createStore(
      rootReducer,
      initialState,
      applyMiddleware(thunk),
  )
}

Мой компонент использует магазин:

import React, {Component} from "react";
import NoteCard from "../components/NoteCard";
import "../styles/notes-container.scss";
import { connect } from "react-redux";
import { itemsFetchData } from "../actions/getNotes";
import 'react-uuid'

class NotesContainer extends Component {
  componentDidMount() {
    this.props.fetchData('http://private-9aad-note10.apiary-mock.com/notes');
    console.log('NotesContainer mounted');
  }


  render() {
    function renderCards() {
      return this.props.notes.map(note => {
        return (
            <NoteCard
                id={note.id}
                name={note.title}
            />
        );
      });
    }

    return (
        <div className="notes-container">{renderCards()}</div>
    )
  }
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    fetchData: (url) => dispatch(itemsFetchData(url))
  }
};

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

Answer 1

Ошибка, которую вы указываете, на самом деле не связана с редуксом. Это потому, что ваша функция не имеет правильного контекста this.

function renderCards() {
      return this.props.notes.map(note => {

Простое решение - сделать ее функцией стрелки

const renderCards = () => {
      return this.props.notes.map(note => {

Есть много хороших объяснений. там почему. Вот тот, который подробно описан .

Answer 2

Без какой-либо трассировки стека, вот где я вижу потенциальную проблему:

render() {
    function renderCards() {
      // `this` is now your `renderCards` function and not your component, thus `this.props` doesn't work.
      return this.props.notes.map(note => {
        return (
            <NoteCard
                id={note.id}
                name={note.title}
            />
        );
      });
    }

    return (
        <div className="notes-container">{renderCards()}</div>
    )
  }

Вы можете попробовать переместить renderCards() из render ():

renderCards() {
  return this.props.notes.map(note => (
    <NoteCard
      id={note.id}
      name={note.title}
    />
  ));
}

render() {
  return (
    <div className="notes-container">{this.renderCards()}</div>
  );
}