[英]How to use redux-promise-middleware with react-scripts v3
I recently updated my react-scripts
to version 3.0.0
in my React application and all of my actions stopped working. 我最近在我的React应用程序中将我的react-scripts
更新到版本3.0.0
,并且我的所有操作都停止了工作。
I am using redux-promise-middleware
so I have always this pattern when fetching data: 我正在使用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 : 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): 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);
});
});
};
I finally found the error. 我终于找到了错误。 One of my function was called useCOnsumable
. 我的一个功能叫做useCOnsumable
。 Because of the use
prefix, React thought that it is a hook and complained. 由于use
前缀,React认为它是一个钩子并抱怨。 It had nothing to do with redux-promise-middleware
. 它与redux-promise-middleware
无关。
Once I renamed the invalid function, the migration was pretty painless. 一旦我重命名了无效函数,迁移就非常轻松了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.