CODEWITHSUNDEEP
react-reduxredux-saga
Eugene Peter
Eugene Peter

Reputation: 1

redux-saga is not able to get payload value from dispatched action

I am trying to create a search functionality. So the values from the search input is actually getting passed in my actions and I can see the values from redux logger. However redux saga seems not able to intercept the payload value from the action creator. When I console log it it prints undefined.

Actions

//ACTIONS

import SearchActionTypes from "./search.types";

export const SearchActionStart = (value) => ({
  type: SearchActionTypes.SEARCH_START,
  value
});

export const SearchActionSuccess = (items) => ({
  type: SearchActionTypes.SEARCH_SUCCESS,
  payload: items,
});

export const SearchActionFailure = (e) => ({
  type: SearchActionTypes.SEARCH_FAILURE,
  payload: e,
});

Search Component

import React, { useEffect, useState } from "react";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectFieldData } from "../../redux/search/search.selector";

import { SearchActionStart } from "../../redux/search/search.actions";

const SearchComponent = (props) => {
  const { searchResults, value } = props;
  useEffect(() => {}, []);

  const onSearchChange = (event) => {
    const { value } = event.target;
    searchResults(value);
  };

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={onSearchChange}
      />
    </div>
  );
};

const mapDispatchToProps = (dispatch) => ({
  searchResults: (value) =>
    dispatch(SearchActionStart(value)),
});

const mapStateToProps = createStructuredSelector({
  searchItem: selectFieldData,
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SearchComponent);

searchSaga

import {
  put,
  call,
  takeLatest,
  all,
} from "redux-saga/effects";

import { SearchImage } from "../../api/search-image";
import Axios from "axios";

import {
  SearchActionStart,
  SearchActionSuccess,
  SearchActionFailure,
} from "./search.actions";

import SearchActionTypes from "./search.types";

function* fetchFieldAsync(value) {
  try {
    // const images = yield call(SearchImage, value);
    console.log(value);
  
   // yield put(SearchActionSuccess(value));
  } catch (e) {
    yield put(SearchActionFailure(e));
    console.log(e);
  }
}

export function* fetchFieldStart() {
  yield takeLatest(
    SearchActionTypes.SEARCH_START,
    fetchFieldAsync
  );
}

export function* searchFieldSaga() {
  yield all([call(fetchFieldAsync)]);
}

rootSaga

import { call, all } from "redux-saga/effects";

import { searchFieldSaga } from "./search/search.saga";

export default function* rootSaga() {
  yield all([call(searchFieldSaga)]);
}

Upvotes: 0

Views: 1632

Answers (2)

Eugene Peter
Eugene Peter

Reputation: 1

A very silly mistake. In my searchSaga instead of exporting the watcher function fetchFieldStart function. I mistakenly exported the intermediary functions instead, which is the fetchFieldAsync function whose job is to fetch an API.

So in searchSaga.js instead of:

export function* searchFieldSaga() {
  yield all([call(fetchFieldAsync)]);
}

It should be:

export function* searchFieldSaga() {
  yield all([call(fetchFieldStart)]);
}

For anyone who might encounter undefined error in your sagas, it might be worth reviewing if your exporting correct functions.

I hope this could also help anyone who have encountered similar problem

Thanks evryone.

Upvotes: 0

Subramanian
Subramanian

Reputation: 11

Please have a look into this code sandbox(https://codesandbox.io/s/basic-redux-saga-49xyd?file=/index.js) ... Your code is working fine. In saga function you will get the object that has been sent from the action as the param. You can destructure it into {value} to get the search term alone as param instead of action object.

Upvotes: 1

Related Questions