Javascript 如何将redux promise中间件与react脚本一起使用v3

我最近在react应用程序中将我的

react脚本

更新为

3.0.0

版本，我的所有操作都停止工作

我使用的是

redux promise中间件

，因此在获取数据时，我始终使用这种模式：

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

有人知道如何迁移我的操作，以便它们符合最新的依赖项吗

编辑：我正在我的react组件中导入此操作并从那里调用它：

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

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

---

我终于发现了错误。我的一个函数名为

useCommusible

。由于

使用

前缀，React认为这是一个钩子并抱怨。它与

redux承诺中间件

无关

---

一旦我重命名了无效函数，迁移过程就相当轻松了。

似乎react和redux都被更新了，导致了问题，我猜这就是错误所在。您正在尝试在react组件外部使用react钩子。这似乎与“一行中的两个操作”无关，而与违反操作有关。假设我们在组件的上下文中，在

chainedAction

之前调用钩子，将它们存储在局部变量中，然后在回调中使用局部变量。伙计，这与redux无关。这是React抱怨您正在React组件外部使用钩子

useState

，

useReducers

，

useMemo

，等等。解决这个问题的唯一方法是在react组件内移动逻辑，或者只在组件内使用外部钩子？

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