Отправка в контейнере по какой-то причине возвращает обещание вместо объекта, или так консоль веб-браузера говорит мне:

mapDispatchToProps() in Connect(OverviewShortComponent) must return a plain object. Instead received [object Promise].

Контейнер в вопросе:

// OverviewShortContainer.js
    const mapStateToProps = (state) => ({
        overview: state.overview,
        loading: state.loading,
        error: state.error
    });

    const mapDispatchToProps = dispatch => {
        const data = dispatch(homeOperations.fetchOverviewSummary());
        return data;
    };

    const OverviewShortContainer = connect(
        mapStateToProps,
        mapDispatchToProps
    )(OverviewShortComponent)

    // homeOperations.js
    const fetchOverviewSummary = () => {
        return dispatch => {
            dispatch(actions.fetchOverviewBegin());
            return fetch('http://localhost:8080/overview/summary')
                .then(handleErrors)
                .then(res => res.json())
                .then(json => {
                    console.log(JSON.stringify("json="+JSON.stringify(json)));
                    dispatch(actions.fetchOverviewSuccess(json));
                })
        }
    }

    // index.js
    const middleware = applyMiddleware(thunk, logger);
    const store = createStore(rootReducer, middleware);

    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );
    registerServiceWorker();

Прикрепление журнала браузера, где вы можете видеть, что действия начала / успеха отправляются и данные извлекаются, так почему это происходит? Что мне не хватает? (Я новичок, чтобы реагировать, так что это может быть много).

browser console log:

0
CrazySabbath 20 Авг 2018 в 23:04

3 ответа

Лучший ответ

Я думаю, проблема в том, что вы на самом деле вызываете dispatch и само действие в mapDispatchToProps (которое будет возвращать обещание, а не ожидаемый объект connect). Я бы просто написал это следующим образом:

const mapDispatchToProps = {
    fetchOverviewSummary: homeOperations.fetchOverviewSummary
}

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

1
Nick Swope 20 Авг 2018 в 20:18

mapDispatchToProps должен возвращать метод, так как он связывает редукционные действия (методы) с компонентом. Пример:

const mapDispatchToProps = dispatch => {
    return({
        fetchOverviewSummary: () => {dispatch(homeOperations.fetchOverviewSummary())}
    })
};

После этого вы можете вызвать fetchOverviewSummary() в подключенном компоненте.

0
zypox 20 Авг 2018 в 20:13

Ниже код не прав

 const mapDispatchToProps = dispatch => {
        const data = dispatch(homeOperations.fetchOverviewSummary());
        return data;
 };

Предполагается, что mapDispatchToProps возвращает объект с ключами, которые затем можно использовать для выполнения действий. Например, если fetchOverviewSummary должен быть вызван из компонента, он должен быть объявлен как показано ниже:

const mapDispatchToProps = (dispatch) => {
        return {
            fetchOverviewSummary: () => {dispatch(homeOperations.fetchOverviewSummary())}
        }
 };

И тогда это называется:

this.props.fetchOverviewSummary()
0
cheekujha 20 Авг 2018 в 20:20
51937804