首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用redux错误,采取(PatternOrChannel):参数8是无效通道或有效模式

使用redux错误,采取(PatternOrChannel):参数8是无效通道或有效模式
EN

Stack Overflow用户
提问于 2018-10-05 15:48:01
回答 2查看 11.8K关注 0票数 11

我试图使用redux saga库来捕获一些操作,但是当我运行这个应用程序时,我遇到了这个错误:

index.js:2178 uncaught at rootSaga at rootSaga at projectSaga at watchFetchRequest at takeEvery : takeEvery (PatternOrChannel):参数8不是有效的通道,或在takeEvery (http://localhost:3000/static/js/bundle.js:85993:94)的http://localhost:3000/static/js/bundle.js:84689:9上的有效模式(http://localhost:3000/static/js/bundle.js:85993:94) at createTaskIterator (http://localhost:3000/static/js/bundle.js:85179:17) at runForkEffect (http://localhost:3000/static/js/bundle.js:85583:24) at runEffect (http://localhost:3000/static/js/bundle.js:85468:872) at next (http://localhost:3000/static/js/bundle.js:85348:9) at proc (RunEffect) at proc()runEffect (http://localhost:3000/static/js/bundle.js:85468:872) at http://localhost:3000/static/js/bundle.js:85677:14 at Array.forEach () at runAllEffect (http://localhost:3000/static/js/bundle.js:85676:10) at runEffect (http://localhost:3000/static/js/bundle.js:85468:413) next (http://localhost:3000/static/js/bundle.js:85348:9) at proc (http://localhost:3000/static/js/bundle.js:85303:3) at runForkEffect (http://localhost:3000/static/js/bundle.js:85587:19) at runEffect (http://localhost:3000/static/js/bundle.js:85468:872) at http://localhost:3000/static/js/bundle.js:85677:14 at Array.forEach (http://localhost:3000/static/js/bundle.js:85676:10) at runAllEffect (http://localhost:3000/static/js/bundle.js:85468:413)其次(http://localhost:3000/static/js/bundle.js:85348:9)在proc (http://localhost:3000/static/js/bundle.js:85303:3) at runSaga (http://localhost:3000/static/js/bundle.js:85858:76) at Object./src/store/reduxRoot.tsx (http://localhost:3000/static/js/bundle.js:95823:16) at http://localhost:3000/static/js/bundle.js:85348:9 (http://localhost:3000/static/js/bundle.js:679:30) at fn (http://localhost:3000/static/js/bundle.js:89:20) at Object./src/index.tsx (http://localhost:3000/static/js/bundle.js:95325:75) at webpack_require (http://localhost:3000/static/js/bundle.js:679:30) at fn (http://localhost:3000/static/js/bundle.js:89:20)在webpack_require (http://localhost:3000/static/js/bundle.js:679:30)在./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js.module.exports (http://localhost:3000/static/js/bundle.js:725:37)在http://localhost:3000/static/js/bundle.js:728:10 (http://localhost:3000/static/js/bundle.js:725:37)

这是传奇代码:

代码语言:javascript
运行
复制
import { all, call, fork, put, takeEvery } from 'redux-saga/effects';
import {  ActionType, Action, SearchCriteria } from '../model/types';
import { searchProjectsError, searchProjectsCompleted } from '../actions/projects';
import { API_URL } from '../../config';
// import axios from 'axios';

function callApi(method: string, url: string, path: string, data?: any) {
    return fetch(url  + path, {
      method,
      headers: {'Content-Type': 'application/json; charset=utf-8', 'Access-Control-Allow-Origin': '*'},
      body: JSON.stringify(data)
    }).then(res => res.json());
  }

// Here we use `redux-saga` to trigger actions asynchronously. `redux-saga` uses something called a
// "generator function", which you can read about here:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

function* handleFetch(action: Action<SearchCriteria>) {
  try {
    // To call async functions, use redux-saga's `call()`.
    const res = yield call(callApi, 'get', API_URL , '/api/DocumentLoader/GetProjects/', action.payload);

    if (res.error) {
      yield put(searchProjectsError(res.error));
    } else {
      yield put(searchProjectsCompleted(res));
    }
  } catch (err) {
    if (err instanceof Error) {
      yield put(searchProjectsError(err.stack!));
    } else {
      yield put(searchProjectsError('An unknown error occured.'));
    }
  }
}

// This is our watcher function. We use `take*()` functions to watch Redux for a specific action
// type, and run our saga, for example the `handleFetch()` saga above.
function* watchFetchRequest() {
  yield takeEvery(ActionType.SEARCH_PROJECTS, handleFetch); // I think the error is here
}

// We can also use `fork()` here to split our saga into multiple watchers.
function* projectSaga() {
  yield all([fork(watchFetchRequest)]);
}

export default projectSaga;

我已经试图在这里找到一个答案,但是我唯一能找到的就是this post,但是ActionType是导出的。我认为问题在于handleFetch函数的参数。

这就是行动:

代码语言:javascript
运行
复制
export function searchProjects(criterias: SearchCriteria): Action<SearchCriteria> {
    return {
        type: ActionType.SEARCH_PROJECTS,
        payload: criterias
    };
}

另一件事可能是,也许我当时做错了什么来编写佐贺中间件:

代码语言:javascript
运行
复制
const sagaMiddleware = createSagaMiddleware();

var middleware = applyMiddleware(logger, thunk, sagaMiddleware);

if (process.env.NODE_ENV === 'development') {
    middleware = composeWithDevTools(middleware);
}

// Here we use `redux-saga` to trigger actions asynchronously. `redux-saga` uses something called a
// "generator function", which you can read about here:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
export function* rootSaga() {
    yield all([fork(projectSaga)]);
  }
// running the root saga, and return the store object.
 sagaMiddleware.run(rootSaga);

我还尝试从handleFetch中删除操作参数,但错误仍在发生。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-05 18:42:38

我发现了什么是错误,问题是ActionType枚举的定义。它没有为每个操作分配字符串值。

代码语言:javascript
运行
复制
export const enum ActionType {

// Projects
SEARCH_PROJECT,
SEARCH_PROJECTS_COMPLETED,
SEARCH_PROJECTS_ERROR,

}

这解决了问题:

代码语言:javascript
运行
复制
export const enum ActionType {

// Projects
SEARCH_PROJECTS= '@@projects/SEARCH_PROJECTS',
SEARCH_PROJECTS_COMPLETED= '@@projects/SEARCH_PROJECTS_COMPLETED',
SEARCH_PROJECTS_ERROR= '@@projects/SEARCH_PROJECTS_ERROR',

}
票数 13
EN

Stack Overflow用户

发布于 2018-10-05 17:09:16

唯一可能的错误是:

检查是否从定义常量的模型文件中导入了{ ActionType }对象。

代码语言:javascript
运行
复制
export function searchProjects(criterias: SearchCriteria): 
    Action<SearchCriteria> {
    return {
        type: ActionType.SEARCH_PROJECTS,
        payload: criterias
    };
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52669272

复制
相关文章

相似问题

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