title: Redux Saga Error: takeLatest$1 requires a pattern or channel
body: <p>I am using Redux and Redux Saga for my project of an online shopping website, so this is how I have done:</p>
  <p><code>actions/products.js</code></p>
  <pre><code>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 = () =&gt; ({
    type: Types.GET_PRODUCTS_REQUEST,
  });
  
  export const getProductSuccess = ({products}) =&gt; ({
    type: Types.GET_PRODUCTS_SUCCESS,
    payload: {
      products,
    },
  });
  
  export const createProductRequest = ({
    name,
    price,
    description,
    productImage,
  }) =&gt; ({
    type: Types.CREATE_PRODUCT_REQUEST,
    payload: {
      name,
      price,
      description,
      productImage,
    },
  });
  </code></pre>
  <p><code>reducers/products.js</code></p>
  <pre><code>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;
      }
    }
  }
  </code></pre>
  <p><code>reducers/index.js</code></p>
  <pre><code>import {combineReducers} from 'redux';
  import ProductsReducer from './products';
  import OrderReducer from './orders';
  
  export default combineReducers({
    products: ProductsReducer,
    orders: OrderReducer
  });
  </code></pre>
  <p><code>sagas/products.js</code></p>
  <pre><code>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;
  </code></pre>
  <p><code>sagas/index.js</code></p>
  <pre><code>import {combineReducers} from 'redux';
  import ProductsReducer from './products';
  import OrderReducer from './orders';
  
  export default combineReducers({
    products: ProductsReducer,
    orders: OrderReducer,
  });
  </code></pre>
  <p><code>api/products</code></p>
  <pre><code>const baseUrl = 'https://shop-test-api.herokuapp.com';
  
  export const getProducts = async () =&gt; {
    return await (await (await fetch(`${baseUrl}/products`)).json()).docs;
  };
  
  export const createProduct = async ({
    name,
    price,
    description,
    productImage,
  }) =&gt; {
    return await fetch(`${baseUrl}/products`, {
      method: 'POST',
      body: {
        name,
        price,
        description,
        productImage,
      },
      headers: {
        'content-type': 'application/json; charset=UTF-8',
      },
    }).json();
  };
  </code></pre>
  <p>even I have not import <code>createNewProductRequest</code> in the <code>actions/products.js</code> to the component I want to use, the console log out this error:</p>
  <p><a href="https://i.stack.imgur.com/bzxIw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bzxIw.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/cqfab.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cqfab.png" alt="enter image description here" /></a></p>
  <p>The error occurs in the function <code>createProduct</code> of <code>sagas/products.js</code>, I use <code>takeLastest</code> 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</p>
  <p>please help me to tackle with it, it means a lot to me.</p>
  <p>This is the code repo: <a href="https://gitlab.com/Khangithub/redux-saga-multiple-reducers-and-requests" rel="nofollow noreferrer">https://gitlab.com/Khangithub/redux-saga-multiple-reducers-and-requests</a></p>
  <p>Once again. thank you so much and have a good day</p>