Как использовать избыточное-обещающее-промежуточное программное обеспечение с реактивными скриптами v3 - PullRequest
Новая
       16

Как использовать избыточное-обещающее-промежуточное программное обеспечение с реактивными скриптами v3

2 голосов
/ 27 апреля 2019

Я недавно обновил свой react-scripts до версии 3.0.0 в своем приложении React, и все мои действия перестали работать.

Я использую redux-promise-middleware, поэтому у меня всегда есть этот шаблон при получении данных: 

export const FIRST_ACTION = 'FIRST_ACTION';
export const FIRST_ACTION_PENDING = 'FIRST_ACTION_PENDING';
export const FIRST_ACTION_REJECTED = 'FIRST_ACTION_REJECTED';
export const FIRST_ACTION_FULFILLED = 'FIRST_ACTION_FULFILLED';

store.js 

import promiseMiddleware from 'redux-promise-middleware';

export default function configureStore() {
    return createStore(
        rootReducer,
        applyMiddleware(thunk, promiseMiddleware(), logger)
    );
}

Я обычно выполняю несколько запросов в цепочке в моих действиях, подобных этому: 

import { 
    firstAction,
    secondAction
} from '../service';

const chainedAction = (...) => {
    return (dispatch) => {
        return dispatch({
            type: FIRST_ACTION,
            payload: firstAction(...)
        }).then(() => dispatch({
            type: SECOND_ACTION,
            payload: secondAction(...)
        }));
    };
};

После обновления я получаю следующие ошибки: 

React Hook "firstAction" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

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

РЕДАКТИРОВАТЬ: я импортирую это действие в свой компонент реагирования и вызываю его оттуда: 

import { 
    chainedAction
} from '../actions';
...
<Button onClick={(...) => chainedAction(...)}
...
const mapDispatchToProps = dispatch => (
    bindActionCreators({ 
        chainedAction
    }, dispatch)
);

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

firstAction (второе действие аналогично): 

export const firstAction = (...) => {
    return new Promise((resolve, reject) => {
        fetch(API_URL, {
            method: 'POST',
            body: ...
        }).then(response => {
            if (response.ok) {
                resolve(response.text());
            }

            reject('...');
        }).catch(error => {
            return reject(error.message);
        });
    });
};
...