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

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

0 голосов
/ 08 мая 2020

Я изучаю React и Redux. И у меня может быть действительно основной c вопрос.

Я хочу получить одну историю из моего бэкэнда, используя функцию Redux mapStateToProps (# 1). Итак, я написал функцию getSingleStory, которая принимает идентификатор в качестве аргумента и возвращает данные истории (№2). Когда я регистрирую данные ответа getSingleStory в консоли, он показывает мне правильную историю, полученную из бэкэнда (# 3):

Response data from the getSingleStory Function (console.log was executed in the action file)

Однако, если консоль регистрирует массив историй в моем компоненте (# 4), она выводит все истории из моей базы данных, а не только одну историю, которую я хотел получить (см. Рисунок). Если я хочу отобразить Story.title, в моей функции рендеринга, конечно, это не работает.

Story Props of the component

Если бы кто-нибудь мог объяснить мне, почему в данные ответа включена одна история, а в const story = this.props.story; внезапно появляются все истории, что мне очень поможет. 

export class StoryDetails extends Component {

componentDidMount() {                                             // #2
   this.props.getSingleStory(this.props.match.params.id);
 }

 render() {

   const story = this.props.story;
   console.log (story);                            // #4
   return (
          <div>

              <h2>{story.title}</h2>
         </div>
   );
 }
}

const mapStateToProps = state => ({story: state.story});                    //#1

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

Action 

// GET SINGLE STORY
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,
                story: res.data

            }, console.log (res.data));                                //#3
            resolve(res);
         })
        .catch(err => {
            dispatch(returnErrors(err.response.data, err.response.status));
            reject(err);
        });
   });
};

Reducer 

import { GET_SINGLE_STORY } from "../actions/types.js";


export default function (state = {}, action) {  
  switch (action.type) {
    case GET_SINGLE_STORY:                                     
      return action.story;
    default:
      return state;
  }
};

Заранее большое спасибо!

...