Как получить один элемент данных из базы данных с помощью Redux и React? - PullRequest
Новая
       5

Как получить один элемент данных из базы данных с помощью Redux и React?

1 голос
/ 15 апреля 2020

Я новичок в React и Redux и в настоящее время пытаюсь получить одну историю (id, title, content, audio) из моей базы данных, используя идентификатор истории. Я настроил компонент, действие и редуктор.

Однако я сталкиваюсь со следующей ошибкой, возникающей в компоненте:

Невозможно прочитать свойство 'then' из неопределенного 

getStory(id) {
> 31 |    this.props.getSingleStory(id)
     | ^  32 |      .then(response => {
  33 |        this.setState({
  34 |          story: response.data

Компонент подробности истории 

import {getSingleStory } from '../../actions/story';
....

export class StoryDetails extends Component {

  constructor(props) {
    super(props);
    this.getStory = this.getStory.bind(this);

    this.state = {
    story: {
        id: null,
        title: "",
        content: "",
        audio: ""
      }

    };
}
    componentDidMount() {
    this.getStory(this.props.match.params.id);
  }

  getStory(id) {
    this.props.getSingleStory(id)
      .then(response => {
        this.setState({
          story: response.data
        });
        console.log(response.data);
      })
      .catch(e => {
        console.log(e);
      });
  }  

render() {

    const { story } = this.state;
    return (

  <Fragment>

        <h2>Stories</h2>

            {story.title}
            {story.content}
      </Fragment>

    );
  }
}



const mapStateToProps = state => ({
  story: state.story.story

});




export default connect(
  mapStateToProps,
  { getSingleStory}
)(StoryDetails);

Действие (Действие зарегистрировано в типах) 

// GET SINGLE STORY
export const getSingleStory = id => (dispatch, getState) => {
  axios
    .get( apiBase + `/story/${id}/`, tokenConfig(getState))
    .then(res => {
      dispatch({
        type: GET_SINGLE_STORY,
        payload: res.data
      });
    })
  .catch(err =>
      dispatch(returnErrors(err.response.data, err.response.status))
    );
};

Редуктор 

    case GET_SINGLE_STORY:
      return {
        ...state,
        story: state.story.filter(story => story.id !== action.payload)
      };

Насколько я вижу, мое действие GET_SINGLE_STORY возвращает 'res.data'. Поэтому я не могу понять, почему «тогда» не определено.

Спасибо за любую подсказку!

1 Ответ

1 голос
/ 15 апреля 2020

Вы должны вернуть обещание в вашем getSingleStory (Вы ничего не возвращаете) 

export const getSingleStory = id => (dispatch, getState) => {
    return new Promise((resolve, reject) => {
        axios.get( apiBase + `/story/${id}/`, tokenConfig(getState))
        .then(res => {
            dispatch({
                type: GET_SINGLE_STORY,
                payload: res.data
            });
            resolve(res);
         })
        .catch(err => {
            dispatch(returnErrors(err.response.data, err.response.status));
            reject(err);
        });
   });
};
...