3

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);
        });
    });
};
8
  • It seems that react and redux were updated that caused problems I guess Commented Apr 27, 2019 at 9:49
  • It's right there in the error. You're trying to use a react hook outside of a react component. Commented Apr 29, 2019 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. 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. Commented Apr 29, 2019 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. Commented Apr 29, 2019 at 12:16
  • How does firstAction look like? Commented Apr 29, 2019 at 12:26

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.