Реагировать на выборку исключений нулевого указателя данных

Question

Я учусь реагировать с использованием избыточности и хочу добиться чего-то подобного:

Когда я перехожу на этот URL:

some_url / posts / 1

Iхочу получить с моего сервера некоторые данные и затем показать их на странице.

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

Я сделал что-то подобное, но это выглядит не очень хорошо, как правильно предотвратить исключение этого нулевого указателя и ждать, пока не будут получены данные?

Внутри моего компонента:

 componentWillMount() {
 this.props.fetchPost( 
 parseInt(this.props.match.params.postId));
}

render(){
    return(
        <div>
            {post.title}
        </div>
    )};

Мой создатель действий:

export function fetchPost(postId){

const request = axios.get(`${ROOT_URL}/posts${postId}`);

return {
    type: FETCH_POST,
    payload: request
};
}

И редуктор, здесь я просто заполнил состояние пустым шаблоном объекта, который предоставляет сервер.Без этого я получил NullPointerException.

import { FETCH_POST } from "../actions";

export default function(state = {id: 0, title: "", infos: [{id: 0, content: "", authorId: 0}]}, action){
switch(action.type){
    case FETCH_POST:
        return action.payload;
  }

return state;
}

Как правильно ждать поступления данных?

Answer 1

Действия в redux всегда должны возвращать простой JS-объект, который должен иметь обязательное свойство type.

Когда вы выполняете асинхронный код в создателе действий, возвращаемый объект больше не является простым объектом JS.

Если вам нужно использовать redux, вам придется использовать промежуточное программное обеспечение, например redux-thunk.

https://github.com/reduxjs/redux-thunk

Однако промежуточные программы - это сложная тема в реакции.& redux.

Если вы просто хотите получить некоторые данные из вашего API, вы можете сделать это в простой реакции.Но для использования избыточного потока используйте промежуточное программное обеспечение.Вы также можете сделать это без промежуточного программного обеспечения, но это не рекомендуемый подход.

Answer 2

Axios использует Promise для автоматической обработки http-ответов .

HTTP-клиент на основе Promise для браузера и node.js

Так что когдаВы возвращаете объект запроса, в настоящее время он не разрешен.Я думаю, что вам нужно немного реорганизовать свой код, чтобы он выглядел примерно так:

function fetchPost(postId) {
   return axios.get(`${ROOT_URL}/posts${postId}`);
}

// And your action creator
function updateContent(payload) {
   return {
      type: UPDATE_CONTENT,
      payload: payload,
   }
}

И назовите это в вашем компоненте:

componentWillMount() {
 fetchPost(parseInt(this.props.match.params.postId)).then(this.props.updateContent);
}

Кстати, есть много способовдля этого, я думаю, вам следует прочитать документацию Axios и выбрать тот, который вы предпочитаете, и тот, который соответствует требованиям вашего приложения.