[英]Redux Saga Error: takeLatest$1 requires a pattern or channel
我正在为我的在线购物网站项目使用 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();
};
即使我没有将actions/products.js
中的createNewProductRequest
导入到我要使用的组件,控制台也会注销此错误:
错误发生在sagas/products.js
的 function createProduct
中,我使用takeLastest
因为我使用了很多调度(创建新产品,然后在创建新产品后获取更新的产品列表),它告诉我该错误
请帮我解决它,这对我来说意义重大。
这是代码仓库:https://gitlab.com/Khangithub/redux-saga-multiple-reducers-and-requests
再次。 非常感谢你,祝你有美好的一天
好吧,对我来说,我的动作类型是未定义的,我更改了定义类型的原始文件并忘记影响我的传奇中的更改,因此出现了错误。 所以这可能与您的代码相同。 只需检查您的类型以确保其已定义并且没有拼写错误。
得到了同样的错误,因为我在 sagas 中有一个重复的名字
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.