如何使用 Redux 和 React 从数据库中获取单个数据元素？

Question

我是 React 和 Redux 的新手，目前正在尝试使用故事 ID 从我的数据库中获取单个故事（ID、标题、内容、音频）。我已经设置了组件、动作和减速器。

但是我在组件中遇到了以下错误：

无法读取未定义的属性“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”。所以我不明白为什么'then'是未定义的。

感谢任何提示！

Answer 1

你应该在你的 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);
        });
   });
};