Redux-saga 从动作中获取数据返回 patternOrChannel 未定义 [英] Redux-saga get data from action returns patternOrChannel is undefined

查看:185
本文介绍了Redux-saga 从动作中获取数据返回 patternOrChannel 未定义的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要将动态数据从我的屏幕发送到 action/reducer 并使用该数据从 API 获取数据,但是当我在 rootSaga 中让步时,我会收到如下错误:<块引用>

在检查时未捕获(patternOrChannel):patternOrChannel未定义
在 rootSaga 未捕获到 rootSaga
at takeEvery
错误:take(patternOrChannel):patternOrChannel 未定义

屏幕代码:

import { checkUserLoginStatus, userSignin } from '../actions/user';类 PreCheckout 扩展 PureComponent {handleLogin = () =>{this.props.dispatch(userSignin(username, password));};使成为() { .......

操作:

const USER_SIGNIN = 'USER_SIGNIN';export const userSignin = (用户名,密码) =>({类型:USER_SIGNIN,用户名,密码,});

减速器:

import {CHECK_USER_LOGIN_STATUS,USER_SIGNIN,USER_SIGNIN_RESULT,USER_SIGNIN_ERROR,} 来自'../actions/user';常量初始状态 = {isLoggedIn: 假,isFetching:假,信息: {},错误:空,};const reducer = (state = initialState, action) =>{开关(动作.类型){案例 CHECK_USER_LOGIN_STATUS:返回 {...状态,};案例 USER_SIGNIN:返回 {...状态,isFetching: 真,};案例 USER_SIGNIN_RESULT:返回 {...状态,isFetching:假,信息:action.result,};案例 USER_SIGNIN_ERROR:返回 {...状态,isFetching:假,错误:action.error,};

Redux-Saga:

import {USER_SIGNIN,USER_SIGNIN_RESULT,USER_SIGNIN_ERROR,} 来自'../actions/user';函数* fetchUserInformation(action) {尝试 {console.log('fetchUserInformation action:', action);const response = yield call(login, action);收益率放置({类型:USER_SIGNIN_RESULT,结果:response.result,});}赶上(e){收益率放置({类型:USER_SIGNIN_ERROR,错误:e.message,});}}导出默认函数* rootSaga() {产量 takeEvery(USER_SIGNIN, fetchUserInformation);}

解决方案

正如我在评论中提到的.您只是忘记导出常量.

应该是

export const USER_SIGNIN = 'USER_SIGNIN';

const USER_SIGNIN = 'USER_SIGNIN';...出口{ USER_SIGNIN };

eslint 可以使用 eslint-plugin-import 和这个 规则 已启用.

I need to send dynamic data from my screen to action/reducer and fetch data from API with that data, but when i yield in my rootSaga i'll get an error like this:

uncaught at check take(patternOrChannel): patternOrChannel is undefined
uncaught at rootSaga at rootSaga
at takeEvery
Error: take(patternOrChannel): patternOrChannel is undefined

Screen code:

import { checkUserLoginStatus, userSignin } from '../actions/user';

class PreCheckout extends PureComponent {
   handleLogin = () => {
     this.props.dispatch(userSignin(username, password));
   };
   render() { .......

Action:

const USER_SIGNIN = 'USER_SIGNIN';

export const userSignin = (username, password) => ({
   type: USER_SIGNIN,
   username,
   password,
});

Reducer:

import {
  CHECK_USER_LOGIN_STATUS,
  USER_SIGNIN,
  USER_SIGNIN_RESULT,
  USER_SIGNIN_ERROR,
} from '../actions/user';

const initialState = {
  isLoggedIn: false,
  isFetching: false,
  information: {},
  error: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case CHECK_USER_LOGIN_STATUS:
      return {
        ...state,
      };
    case USER_SIGNIN:
      return {
        ...state,
        isFetching: true,
      };
    case USER_SIGNIN_RESULT:
      return {
        ...state,
        isFetching: false,
        information: action.result,
      };
    case USER_SIGNIN_ERROR:
      return {
        ...state,
        isFetching: false,
        error: action.error,
      };

Redux-Saga:

import {
  USER_SIGNIN,
  USER_SIGNIN_RESULT,
  USER_SIGNIN_ERROR,
} from '../actions/user';

function* fetchUserInformation(action) {
  try {
    console.log('fetchUserInformation action: ', action);
    const response = yield call(login, action);
    yield put({
      type: USER_SIGNIN_RESULT,
      result: response.result,
    });
  } catch (e) {
    yield put({
      type: USER_SIGNIN_ERROR,
      error: e.message,
    });
  }
}

export default function* rootSaga() {
  yield takeEvery(USER_SIGNIN, fetchUserInformation);
}

解决方案

As I have mention in comment. You simply forgot to export the constant.

Should be

export const USER_SIGNIN = 'USER_SIGNIN';

Or

const USER_SIGNIN = 'USER_SIGNIN';

...

export { USER_SIGNIN };

These types of bugs could be captured by eslint using eslint-plugin-import with this rule enabled.

这篇关于Redux-saga 从动作中获取数据返回 patternOrChannel 未定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆