使用 redux-saga 的异步请求

Question

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

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

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

Here is part of code that is not working as @Clarity suggested:

actions.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
});

reducer.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;
  }
}

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

At the end 'clickerGetPostRequest' is executed but 'clickerGetPostSuccess' nor 'clickerGetPostFailed' ever runs.

Answer 1

生成数组时，需要将数组包装在 all:

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

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

这同样适用于您 rootSaga.js 中的传奇系列。

使用 redux-saga 的异步请求

Async request with redux-saga

javascript

reactjs

redux

redux-saga

react-redux