Redux Saga 错误：takeLatest$1 需要模式或通道

Question

我正在将 Redux 和 Redux Saga 用于我的在线购物网站项目，所以这就是我所做的：

actions/products.js

export const Types = {
  GET_PRODUCTS_REQUEST: 'products/get_products_request',
  GET_PRODUCTS_SUCCESS: 'products/get_products_success',
  CREATE_PRODUCT_REQUEST: 'products/create_product_request',
};

export const getProductRequest = () => ({
  type: Types.GET_PRODUCTS_REQUEST,
});

export const getProductSuccess = ({products}) => ({
  type: Types.GET_PRODUCTS_SUCCESS,
  payload: {
    products,
  },
});

export const createProductRequest = ({
  name,
  price,
  description,
  productImage,
}) => ({
  type: Types.CREATE_PRODUCT_REQUEST,
  payload: {
    name,
    price,
    description,
    productImage,
  },
});

reducers/products.js

import {Types} from '../actions/products';

const INTIAL_STATE = {
  products: [],
  error: '',
};

export default function products(state = INTIAL_STATE, action) {
  switch (action.type) {
    case Types.GET_PRODUCTS_SUCCESS: {
      return {
        ...state,
        products: action.payload.products,
      };
    }
    default: {
      return state;
    }
  }
}

reducers/index.js

import {combineReducers} from 'redux';
import ProductsReducer from './products';
import OrderReducer from './orders';

export default combineReducers({
  products: ProductsReducer,
  orders: OrderReducer
});

sagas/products.js

import {takeEvery, call, fork, put, takeLatest} from 'redux-saga/effects';
import * as actions from '../actions/products';
import * as api from '../api/products';

function* getProducts() {
  try {
    const products = yield call(api.getProducts);
    // console.log(products);
    yield put(
      actions.getProductSuccess({
        products,
      })
    );
  } catch (e) {}
}

function* watchGetProductRequest() {
  yield takeEvery(actions.Types.GET_PRODUCTS_REQUEST, getProducts);
}

function* createProduct({name, price, description, productImage}) {
  try {
    yield call(api.createProduct, {
      name,
      price,
      description,
      productImage,
    });
    yield call(getProducts);
    console.log('create products');
  } catch (e) {
    console.log(e, 'create products');
  }
}

function* watchCreateNewProductRequest() {
  yield takeLatest(actions.Types.CREATE_USER_REQUEST, createProduct);
}

const userSagas = [
  fork(watchGetProductRequest),
  fork(watchCreateNewProductRequest),
];

export default userSagas;

sagas/index.js

import {combineReducers} from 'redux';
import ProductsReducer from './products';
import OrderReducer from './orders';

export default combineReducers({
  products: ProductsReducer,
  orders: OrderReducer,
});

api/products

const baseUrl = 'https://shop-test-api.herokuapp.com';

export const getProducts = async () => {
  return await (await (await fetch(`${baseUrl}/products`)).json()).docs;
};

export const createProduct = async ({
  name,
  price,
  description,
  productImage,
}) => {
  return await fetch(`${baseUrl}/products`, {
    method: 'POST',
    body: {
      name,
      price,
      description,
      productImage,
    },
    headers: {
      'content-type': 'application/json; charset=UTF-8',
    },
  }).json();
};

即使我没有导入createNewProductRequest到actions/products.js我想要使用的组件，控制台也会注销此错误：

createProduct该错误发生在我使用的函数中sagas/products.js，takeLastest因为我使用了许多调度（创建新产品，然后在创建新产品后获取更新的产品列表），它向我显示该错误

请帮助我解决这个问题，这对我来说意义重大。

这是代码仓库：https://gitlab.com/Khangithub/redux-saga-multiple-reducers-and-requests

再次。非常感谢，祝你有美好的一天

Answer 1

好吧，对我来说，我的操作类型未定义，我更改了定义类型的原始文件，但忘记在我的传奇中进行更改，因此出现了该错误。所以你的代码可能有同样的问题。只需检查您的类型以确保其已定义并且没有拼写错误。