mercredi 3 mars 2021

Redux Saga Error: takeLatest$1 requires a pattern or channel

I am using Redux and Redux Saga for my project of an online shopping website, so this is how I have done:

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();
};

even I have not import createNewProductRequest in the actions/products.js to the component I want to use, the console log out this error:

enter image description here

enter image description here

The error occurs in the function createProduct of sagas/products.js, I use takeLastest because I use many dispatches (create new product then take the updated product list after new product was created) and it show me that error

please help me to tackle with it, it means a lot to me.

This is the code repo: https://gitlab.com/Khangithub/redux-saga-multiple-reducers-and-requests

Once again. thank you so much and have a good day




Aucun commentaire:

Enregistrer un commentaire