redux-saga 无法从调度的动作中获取有效负载值答案

【问题标题】：redux-saga is not able to get payload value from dispatched actionredux-saga 无法从调度的动作中获取有效负载值
【发布时间】：2020-07-07 16:56:43
【问题描述】：

我正在尝试创建搜索功能。所以来自搜索输入的值实际上是在我的操作中传递的，我可以看到来自 redux 记录器的值。然而 redux saga 似乎无法拦截来自动作创建者的有效负载值。当我控制台记录它时，它会打印 undefined。

操作

//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,
});

搜索组件

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

搜索传奇

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

【问题讨论】：

标签： react-redux redux-saga

【解决方案1】：

请查看此代码沙箱(https://codesandbox.io/s/basic-redux-saga-49xyd?file=/index.js) ...您的代码运行良好。在 saga 函数中，您将获得从动作发送的对象作为参数。您可以将其解构为 {value} 以单独获取搜索词作为参数而不是操作对象。

【讨论】：

嗨，Subramanian，非常感谢您的回答。我检查了你的例子，它确实有效。我也尝试像这样解构 {value} 之前的值，但在我的代码中它现在仍然有效。我确实发现了问题，这是一个非常愚蠢的问题。我在搜索传奇中导出了错误的函数。我没有导出观察者 fetchFieldStart 函数，而是导出了 fetchFieldAsync 函数。

【解决方案2】：

一个非常愚蠢的错误。在我的 searchSaga 中，而不是导出观察者函数 fetchFieldStart 函数。我错误地导出了中间函数，即 fetchFieldAsync 函数，其工作是获取 API。

所以在 searchSaga.js 而不是：

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

应该是：

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

对于任何可能在您的 sagas 中遇到未定义错误的人，如果您导出正确的函数，可能值得检查一下。

我希望这也可以帮助遇到类似问题的任何人

谢谢大家。

【讨论】：