Redux Saga安装程序，未执行fetch

我的传奇故事有以下设置：

在saga.js中

import { put, call } from "redux-saga/effects";
import { takeLatest } from "redux-saga";
import { SET_BASE_CURRENCY, SET_CURRENCY_REPONSE } from "./duck";
function* fetchCurrencyExchangeRate() {
  const response = yield call(
    fetch,
    "https://api.exchangeratesapi.io/latest?base=USD"
  );
  const data = yield call([response, "json"]);
  // const json = yield fetch(
  //   "https://api.exchangeratesapi.io/latest?base=USD"
  // ).then(response => response.json());
  yield put({ type: SET_CURRENCY_REPONSE, json: data });
}

export default function* rootSaga() {
  yield takeLatest([SET_BASE_CURRENCY], fetchCurrencyExchangeRate);
}

import { defineAction } from "redux-define";
import { createAction, handleActions } from "redux-actions";

export const initialState = {
  exchangeRate: 3.06,
  baseCurrency: "SGD",
  exchangeCurrency: "MYR",
  amountToConvert: 0.0,
  currencyResponse: ""
};

//Action-types
export const SET_EXCHANGE_RATE = defineAction("SET_EXCHANGE_RATE");
export const SET_BASE_CURRENCY = defineAction("SET_BASE_CURRENCY");
export const SET_EXCHANGE_CURRENCY = defineAction("SET_EXCHANGE_CURRENCY");
export const SET_AMOUNT_TO_CONVERT = defineAction("SET_AMOUNT_TO_CONVERT");
export const SET_CURRENCY_REPONSE = defineAction("SET_CURRENCY_REPONSE");

//Action-creators
export const setExchangeRate = createAction(
  SET_EXCHANGE_RATE,
  params => params
);
export const setExchangeCurrency = createAction(
  SET_EXCHANGE_CURRENCY,
  params => params
);
export const setBaseCurrency = createAction(
  SET_BASE_CURRENCY,
  params => params
);
export const setAmountToConvert = createAction(
  SET_BASE_CURRENCY,
  params => params
);
export const setCurrencyResponse = createAction(
  SET_CURRENCY_REPONSE,
  params => params
);

//reducer
const reducer = handleActions(
  {
    [setExchangeRate]: (state, { payload }) => ({
      ...state,
      exchangeRate: payload
    }),
    [setExchangeCurrency]: (state, { payload }) => ({
      ...state,
      exchangeCurrency: payload
    }),
    [setBaseCurrency]: (state, { payload }) => ({
      ...state,
      baseCurrency: payload
    }),
    [setAmountToConvert]: (state, { payload }) => ({
      ...state,
      amountToConvert: payload
    }),
    [setCurrencyResponse]: (state, { payload }) => ({
      ...state,
      currencyResponse: payload
    })
  },
  initialState
);
export default reducer;

//Selector
export const selectExhangeRate = state => state.reducer.exchangeRate;
export const selectExchangeCurrency = state => state.reducer.exchangeCurrency;
export const selectBaseCurrency = state => state.reducer.baseCurrency;
export const selectAmountToConvert = state => state.reducer.amountToConvert;

在duck.js中

import { put, call } from "redux-saga/effects";
import { takeLatest } from "redux-saga";
import { SET_BASE_CURRENCY, SET_CURRENCY_REPONSE } from "./duck";
function* fetchCurrencyExchangeRate() {
  const response = yield call(
    fetch,
    "https://api.exchangeratesapi.io/latest?base=USD"
  );
  const data = yield call([response, "json"]);
  // const json = yield fetch(
  //   "https://api.exchangeratesapi.io/latest?base=USD"
  // ).then(response => response.json());
  yield put({ type: SET_CURRENCY_REPONSE, json: data });
}

export default function* rootSaga() {
  yield takeLatest([SET_BASE_CURRENCY], fetchCurrencyExchangeRate);
}

import { defineAction } from "redux-define";
import { createAction, handleActions } from "redux-actions";

export const initialState = {
  exchangeRate: 3.06,
  baseCurrency: "SGD",
  exchangeCurrency: "MYR",
  amountToConvert: 0.0,
  currencyResponse: ""
};

//Action-types
export const SET_EXCHANGE_RATE = defineAction("SET_EXCHANGE_RATE");
export const SET_BASE_CURRENCY = defineAction("SET_BASE_CURRENCY");
export const SET_EXCHANGE_CURRENCY = defineAction("SET_EXCHANGE_CURRENCY");
export const SET_AMOUNT_TO_CONVERT = defineAction("SET_AMOUNT_TO_CONVERT");
export const SET_CURRENCY_REPONSE = defineAction("SET_CURRENCY_REPONSE");

//Action-creators
export const setExchangeRate = createAction(
  SET_EXCHANGE_RATE,
  params => params
);
export const setExchangeCurrency = createAction(
  SET_EXCHANGE_CURRENCY,
  params => params
);
export const setBaseCurrency = createAction(
  SET_BASE_CURRENCY,
  params => params
);
export const setAmountToConvert = createAction(
  SET_BASE_CURRENCY,
  params => params
);
export const setCurrencyResponse = createAction(
  SET_CURRENCY_REPONSE,
  params => params
);

//reducer
const reducer = handleActions(
  {
    [setExchangeRate]: (state, { payload }) => ({
      ...state,
      exchangeRate: payload
    }),
    [setExchangeCurrency]: (state, { payload }) => ({
      ...state,
      exchangeCurrency: payload
    }),
    [setBaseCurrency]: (state, { payload }) => ({
      ...state,
      baseCurrency: payload
    }),
    [setAmountToConvert]: (state, { payload }) => ({
      ...state,
      amountToConvert: payload
    }),
    [setCurrencyResponse]: (state, { payload }) => ({
      ...state,
      currencyResponse: payload
    })
  },
  initialState
);
export default reducer;

//Selector
export const selectExhangeRate = state => state.reducer.exchangeRate;
export const selectExchangeCurrency = state => state.reducer.exchangeCurrency;
export const selectBaseCurrency = state => state.reducer.baseCurrency;
export const selectAmountToConvert = state => state.reducer.amountToConvert;

在index.js中设置传奇故事

import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware, compose } from "redux";
import ReduxThunk from "redux-thunk";
import reducers from "./configureStore/reducers";
import { Provider } from "react-redux";
import App from "./App";
import rootSaga from "./configureStore/saga";
import createSagaMiddleware from "redux-saga";

const sagaMiddleware = createSagaMiddleware();
const middlewares = [ReduxThunk];
const store = createStore(
  reducers,
  compose(
    applyMiddleware(...middlewares),
    applyMiddleware(sagaMiddleware),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  )
);

sagaMiddleware.run(rootSaga);

const rootElement = document.getElementById("root");

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

从“React”导入React；
从“react dom”导入react dom；
从“redux”导入{createStore，applyMiddleware，compose}；
从“redux thunk”导入redux thunk；
从“/configureStore/reducers”导入还原程序；
从“react redux”导入{Provider}；
从“/App”导入应用程序；
从“/configureStore/saga”导入rootSaga；
从“redux saga”导入createSagaMiddleware；
const sagaMiddleware=createSagaMiddleware（）；
const middleware=[ReduxThunk]；
const store=createStore(
减速器，
谱写(
applyMiddleware（…中间件），
applyMiddleware（sagaMiddleware），
window.devToolsExtension？window.devToolsExtension（）：f=>f
)
);
sagaMiddleware.run（rootSaga）；
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
我真的建议您使用一些更新的资源来编写代码。例如，您需要从“redux saga/effects”中导入
takeLatest
。此外，redux定义库最近一次更新是在2017年，它似乎引入了比它更复杂的功能。现在您使用它是错误的，因为您发送的操作类型不是字符串好吧，我来看看这是redux库的维护者提供的。