Преобразователь Redux не обновляется с ответом от асинхронной функции

Я следовал руководству по настройке redux-thunk, чтобы я мог получить геолокацию пользователей, а затем отправить и обновить состояние. Однако каждый раз, когда я пытаюсь отправить действие с данными ответа, он просто устанавливает для этих данных значение null.

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

geoLocationActions.js

export function geoLocationActions() {
   return dispatch => {
    const geolocation = navigator.geolocation;
    geolocation.getCurrentPosition((position) => {
        console.info(position.coords);
        dispatch({
            type: 'FETCH_USER_LOCATION_SUCCESS',
            payload: position
        });
    });
  } 
};

MapContainer.js

import React from "react";
import { geoLocationActions } from '../../../actions/geoLocationActions';
import { connect } from 'react-redux';

class MapContainer extends React.Component {

    componentWillMount() {
        this.props.geoLocationActions();
    }

    render() {
        return (
            <div>
                <p>Fetching location...</p>
            </div>
        );
    }
}

// update current geolocation state
const mapDispatchToProps = (dispatch) => {
    return {
        geoLocationActions: () => dispatch(geoLocationActions())
    };
}

const mapStateToProps = (state) => {
    return {
        state: state
    };
};

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

redurs.js

case 'FETCH_USER_LOCATION_SUCCESS':
        return {
            ...state,
            userLocation: action.payload
        }

store.js

import { createStore, combineReducers, applyMiddleware, compose } from 

'redux';
import reducer from '../reducers/reducers';
import reduxThunk from "redux-thunk";

const rootReducer = combineReducers({
    state: reducer
});

export const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(reduxThunk),
        window.devToolsExtension ? window.devToolsExtension() : f => f
    )
);

Вы видите console.info(position.coords); в своей консоли?

— 27.10.2018 22:45

да! Верно, поэтому мне это кажется очень странным.

— 27.10.2018 22:54

Вставьте console.info() в редуктор. Это называется? Затем добавьте console.info(this.props) в вашу функцию рендеринга, это вызывается?

— 27.10.2018 23:02

reactjs redux geolocation react-redux redux-thunk

27.10.2018 22:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

163

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Получается объект HTML5 Geoposition. Вам нужно преобразовать его в обычный объект, который можно сериализовать с помощью JSON.stringify. Вы можете использовать этот метод:

const geopositionToObject = geoposition => ({
  timestamp: geoposition.timestamp,
  coords: {
    accuracy: geoposition.coords.accuracy,
    latitude: geoposition.coords.latitude,
    longitude: geoposition.coords.longitude
  }
})

Обновите файл geoLocationActions.js следующим образом:

export function geoLocationActions() {
   return dispatch => {
    const geolocation = navigator.geolocation;
    geolocation.getCurrentPosition((position) => {
        const positionObj = geopositionToObject(position)
        console.info(positionObj);
        dispatch({
            type: 'FETCH_USER_LOCATION_SUCCESS',
            payload: positionObj
        });
    });
  } 
};

Вы можете взглянуть на мое репо, чтобы увидеть тот же код.

27.10.2018 23:06