Question

我的传奇有以下设置：

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

在 duck.js

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

但是，由于某种原因，我无法使用call函数或fetch函数。我希望它在触发SET_BASE_CURRENCY操作时触发api调用。我的设置是否有问题，或者我称呼传奇的方式是错误的？完整代码位于此沙箱内：https://codesandbox.io/s/todoapp-with-redux-and-normalized-store-jkp8z

Saga设置，未执行提取

0 个答案: