javascript - 带有 redux-saga 的异步请求

Question

我正在学习 redux-saga，到目前为止，我创建了具有工作本地应用程序状态（加号和减号按钮）的基本项目，但是异步部分存在问题。

基本上 redux 在请求操作期间卡住了。

链接做codesandbox： https ://codesandbox.io/s/recursing-dirac-vxy1s

这是不按@Clarity 建议的那样工作的部分代码：

动作.js

export const CLICKER_GET_POST_REQUEST = "CLICKER_GET_POST_REQUEST";
export const CLICKER_GET_POST_SUCCESS = "CLICKER_GET_POST_SUCCESS";
export const CLICKER_GET_POST_FAILED = "CLICKER_GET_POST_FAILED";

export const clickerGetPostRequest = () => ({
  type: CLICKER_GET_POST_REQUEST
});

export const clickerGetPostSuccess = payload => ({
  type: CLICKER_GET_POST_SUCCESS,
  payload
});

export const clickerGetPostFailed = payload => ({
  type: CLICKER_GET_POST_FAILED,
  payload
});

减速器.js

const initialState = {
  post: {},
  isLoading: false,
  isError: false
};

export default function ClickerReducer(state = initialState, action) {
  switch (action.type) {
    case CLICKER_GET_POST_REQUEST:
      return {
        ...state,
        isLoading: true
      };
    case CLICKER_GET_POST_SUCCESS:
      return {
        ...state,
        isLoading: false,
        post: action.payload
      };
    case CLICKER_GET_POST_FAILED:
      return {
        ...state,
        isLoading: false,
        isError: true
      };
    default:
      return state;
  }
}

传奇.js

export default function*() {
  yield [
    takeEvery(CLICKER_GET_POST_REQUEST, fetchPost)
  ];
}

function* fetchPost() {
  try {
    const response = yield call(
      fetch,
      "https://jsonplaceholder.typicode.com/posts/1"
    );
    const data = yield response.json();
    yield put(clickerGetPostSuccess(data));
  } catch (err) {
    yield put(clickerGetPostFailed());
  }
}

最后，“clickerGetPostRequest”被执行，但“clickerGetPostSuccess”和“clickerGetPostFailed”都不会运行。

标签： javascriptreactjsreduxreact-reduxredux-saga

Answer 1

当你产生一个数组时，你需要将数组包装在all：

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

export default function*() {
  yield all([
    takeEvery(CLICKER_GET_POST_REQUEST, fetchPost)
  ]);
}

这同样适用于rootSaga.js.