How to use redux-promise-middleware with react-scripts v3

Question

I recently updated my react-scripts to version 3.0.0 in my React application and all of my actions stopped working.

I am using redux-promise-middleware so I have always this pattern when fetching data:

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)
    );
}

I am usually performing several requests in a chain in my actions like this:

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

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

After the update, I am getting the following errors:

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

Does anybody know how to migrate my actions so they will be compliant with the latest dependencies?

EDIT: I am importing this action in my react component and calling it from there:

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

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

firstAction (second action is similar):

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);
        });
    });
};

It seems that react and redux were updated that caused problems I guess — duc mai, Apr 27 '19 at 09:49
It's right there in the error. You're trying to use a react hook outside of a react component. — Baruch, Apr 29 '19 at 12:12
This appears to have nothing to do with "two actions in a row" and everything to do with violating [the rules of hooks](https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions). Assuming we're in the context of a component, make your calls to the hooks prior to `chainedAction`, store them in local variables and use the locals in then callbacks. — spender, Apr 29 '19 at 12:16
Mate, this has nothing to do with redux. This is React complaining that you're using a hook `useState`, `useReducers`, `useMemo`, etc. outside of a React component. The only way to fix this is to move the logic inside a react component OR only use the external hook inside the component. — Baruch, Apr 29 '19 at 12:16
There seems to be no use of hook anywhere in your code.Could you provide a reproducible demo on codesandbox ? — Shubham Khatri, Apr 30 '19 at 07:08
I am not using any hooks as far as I know. That's why I am so confused. It seems that `react-sripts` v3 introduced some breaking changes and I will probably have to stick with the older version. — Smajl, Apr 30 '19 at 07:12
uploaded push the project in the in githup or repl maybe i help you — Mohammed Al-Reai, Aug 27 '19 at 12:14

score 1 · Accepted Answer · answered Aug 29 '19 at 07:12

I finally found the error. One of my function was called useCOnsumable. Because of the use prefix, React thought that it is a hook and complained. It had nothing to do with redux-promise-middleware.

Once I renamed the invalid function, the migration was pretty painless.

How to use redux-promise-middleware with react-scripts v3

1 Answers1