首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用redux承诺中间件和react脚本v3

如何使用redux承诺中间件和react脚本v3
EN

Stack Overflow用户
提问于 2019-04-27 09:43:53
回答 1查看 558关注 0票数 3

最近,我在React应用程序中将我的react-scripts更新为3.0.0版本,我的所有操作都停止工作。

我使用的是redux-promise-middleware,所以在获取数据时总是使用这种模式:

代码语言:javascript
复制
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

代码语言:javascript
复制
import promiseMiddleware from 'redux-promise-middleware';

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

在我的操作中,我通常是在一个链中执行几个请求:

代码语言:javascript
复制
import { 
    firstAction,
    secondAction
} from '../service';

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

更新之后,我将得到以下错误:

代码语言:javascript
复制
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组件中导入这个操作,并从那里调用它:

代码语言:javascript
复制
import { 
    chainedAction
} from '../actions';
...
<Button onClick={(...) => chainedAction(...)}
...
const mapDispatchToProps = dispatch => (
    bindActionCreators({ 
        chainedAction
    }, dispatch)
);

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

firstAction (第二个动作类似):

代码语言:javascript
复制
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);
        });
    });
};
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-29 07:12:50

我终于发现了错误。我的一个函数叫做useCOnsumable。因为use前缀,反应认为它是一个钩子和抱怨。这与redux-promise-middleware无关。

一旦我重命名了无效函数,迁移就变得非常无痛。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55879206

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档