Javascript 带redux传奇的异步请求

我正在学习redux传奇，到目前为止，我创建了使用本地应用程序状态（加号和减号按钮）的基本项目，但异步部分存在问题

基本上，redux在请求操作期间被卡住

链接do codesandbox：

以下是部分代码未按@Clarity建议的方式工作：

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

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

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

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

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

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

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

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

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”，但 “ClicketPostSuccess”或“ClicketPostFailed”从未运行过

---

生成数组时，需要将数组包装为

all

：

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

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

---

这同样适用于你的

rootSaga.js

中的传奇阵列，而不是链接到沙盒，在这里创建一个最小的可复制示例。我更新了帖子，希望这没有问题。记住，如果答案解决了你的问题，也要接受它。