web-dev-qa-db-ja.com

redux saga、take（patternOrChannel）の使用中にエラーが発生しました：引数8は有効なチャネルまたは有効なパターンではありません

Redux sagaライブラリを使用していくつかのアクションをキャプチャしようとしていますが、アプリを実行すると次のエラーが発生します。

index.js：2178 rootSaga at rootSaga at projectSaga at watchFetchRequest at takeEveryエラー：take（patternOrChannel）：引数8は有効なチャネルまたはtakeの有効なパターンではありません（ http：// localhost：3000/static/js/bundle.js：84689：9 ）at takeEvery（ 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（ http：// localhost：3000/static/js/bundle.js：85303： ）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（）at runAllEffect（ http：// localhost：3000 /static/js/bundle.js:85676:1 )runEでffect（ http：// localhost：3000/static/js/bundle.js：85468：41 ）at next（ http：// localhost：3000/static/js/bundle。 js：85348：9 ）at proc（ http：// localhost：3000/static/js/bundle.js：85303： ）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（）at runAllEffect（ http：// localhost：3000/static/js /bundle.js:85676:1 ）at runEffect（ http：// localhost：3000/static/js/bundle.js：85468：41 ）at next（ http ：// localhost：3000/static/js/bundle.js：85348：9 ）at proc（ http：// localhost：3000/static/js/bundle.js：85303： =）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 ）atwebpack_require（ http：/ /localhost:3000/static/js/bundle.js:679: ）at fn（ http：// loc alhost：3000/static/js/bundle.js：89：2 ）at Object ../src/index.tsx（ http：// localhost：3000/static/js/bundle.js： 95325：75 ）atwebpack_require（ http：// localhost：3000/static/js/bundle.js：679： ）at fn（ http：// localhost：3000/static/js/bundle.js：89：2 ）at Object.0（ http：// localhost： 3000/static/js/bundle.js：96424：18 ）atwebpack_require（ http：// localhost：3000/static/js/bundle.js：679： ）at ./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js.module.exports（ http：// localhost：3000/static/js /bundle.js:725:37 ）at http：// localhost：3000/static/js/bundle.js：728：1

これはサガコードです：

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;

私はすでにSOで答えを見つけようとしましたが、見つけたのは この投稿 だけでしたが、ActionTypeがエクスポートされました。問題はhandleFetch関数のパラメータにあると思います

これはアクションです：

export function searchProjects(criterias: SearchCriteria): Action<SearchCriteria> {
    return {
        type: ActionType.SEARCH_PROJECTS,
        payload: criterias
    };
}

もう1つの可能性は、佐賀ミドルウェアを作成するときに何か間違ったことをしたことです。

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から削除しようとしましたが、エラーが引き続き発生します

javascriptreactjstypescriptreact-reduxredux-saga
4
octavioccl

エラーが何であるかを見つけました。問題はActionType列挙型の定義でした。各アクションに文字列値を割り当てることはありませんでした。

export const enum ActionType {

// Projects
SEARCH_PROJECT,
SEARCH_PROJECTS_COMPLETED,
SEARCH_PROJECTS_ERROR,

}

これで問題が修正されました。

export const enum ActionType {

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

}
5
octavioccl

考えられる唯一のエラーは次のとおりです。

定数を定義したモデルファイルから、ここで{ActionType}オブジェクトをインポートしたかどうかを確認します。

export function searchProjects(criterias: SearchCriteria): 
    Action<SearchCriteria> {
    return {
        type: ActionType.SEARCH_PROJECTS,
        payload: criterias
    };
}
0
Manoj Kumar