Redux saga 没有调用 API

Question

我正在尝试使用 redux-saga 调用我的 API 并向其传递一个参数。我正在使用 redux-logger 和 console.log() 进行调试。但由于某种原因，我的传奇似乎没有去调用 API。

这是状态的控制台日志...如您所见，apiMsg 没有更改，但我会针对每个操作更改它。

我想我在动作、reducer 或组件的某个地方出错了。否则我在 Saga 中调用 API 错误。

这是我的代码

api.js

import axios from 'axios';

export function getPostApi(postId){
  return axios.get(
    `https://jsonplaceholder.typicode.com/posts/${postId}`
  ).then(
    response => {
      return response;
    }
  ).catch(
    err => {throw err;}
  );
}

我的店铺

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga'
import {createLogger} from 'redux-logger';
import rootReducer from '../Reducers';

export default function configureStore(initialState) {
  const sagaMiddleware = createSagaMiddleware();
  const logger = createLogger();
  return {
    ...createStore(rootReducer, initialState, applyMiddleware(sagaMiddleware, logger)),
    runSaga: sagaMiddleware.run
  }
}

传奇故事

import {call, put, takeEvery} from 'redux-saga/effects';
import * as service from '../Services/api';
import * as actions from '../Actions';
import * as types from '../actions/actionTypes';

export function* fetchPost(action){
  try{
    yield put(actions.apiRequest());
    const [post] = yield [call(service.getPostApi, action.postId)];
    yield put(actions.apiRequestSucceeded(post));
  } catch(e){
    yield put(actions.apiRequestFailed());
  }
}

export function* watchApiRequest() {
  yield takeEvery(types.FETCH_POST, fetchPost);
}

动作

import * as types from './actionTypes';

export const fetchPost = (postId) => ({
  type: types.FETCH_POST,
  postId,
});

export const apiRequest = () => {
  return {
    type: types.API_REQUEST
  }
}

export const apiRequestSucceeded = (post) => {
  return {
    type: types.API_REQUEST_SUCCEEDED,
    post
  }
}

export const apiRequestFailed = () => {
  return {
    type: types.API_REQUEST_FAILED
  }
}

减速机

import * as types from '../actions/actionTypes';

const initialState = {
  apiMsg: '',
  postId: 1,
  fetching: false,
  post: null
};

export default function getPostData(state = initialState, action) {
  switch (action.type) {
    case types.API_REQUEST:
      return {
        ...state,
        apiMsg: 'API call request!',
        fetching: true
      }
    case types.API_REQUEST_SUCCEEDED:
      return {
        ...state,
        apiMsg: 'API called succeeded!',     
        fetching: false,
        postId: action.post.id,
        post: action.title
      };
    case types.API_REQUEST_FAILED:
      return {
        ...state,
        apiMsg: 'API called failed!',
        fetching: false,
      };
    default:
      return state;
  }
}

组件页面

import React, { Component } from 'react';
import { View, Text} from 'react-native';
import { connect } from 'react-redux';
import {fetchPost} from './Actions/apiTesterActions';

class TestPage extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    this.props.fetchPost(1)
  }

   render() {
    const { postId, fetching, post } = this.props;
    console.log('Test page props', postId, fetching, post);
    return (
      <View> 
        <Text>Test Page Works! </Text>
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    postId: state.getPostData.postId,
    fetching: state.getPostData.fetching,
    post: state.getPostData.post
  }
};

export default connect(mapStateToProps, {fetchPost})(TestPage);

我还在学习 Redux，现在是 redux-saga，所以我还没有完全理解 structure/hierarchy，但是我正在学习，任何建议都是有帮助的。谢谢

编辑： 我正在使用此 redux saga api call example 作为指南。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import configureStore from './ReduxTest/Store/configureStore';
import rootSaga from './ReduxTest/sagas';

const store = configureStore();
store.runSaga(rootSaga)

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
registerServiceWorker();

saga/index.js

import {fork, all} from 'redux-saga/effects';
import {watchApiRequest} from './apiTester';

export default function* rootSaga() {
  yield all [
    fork(watchApiRequest)
  ]
}

Answer 1

经过一段时间的大量调试，我找到了问题所在。

当我第一次开始创建应用程序时，出现以下错误...

[...effects] has been deprecated in favor of all([...effects]), please update your code

由于 yield all [...] 已被弃用，我在没有考虑它的情况下更改了我的代码，我很高兴错误发生了，但没有意识到它会对我的应用程序产生多大的影响。

(错误) saga/index.js

import {fork, all} from 'redux-saga/effects';
import {watchApiRequest} from './apiTester';

export default function* rootSaga() {
  yield all [
    fork(watchApiRequest)
  ]
}

(右) saga/index.js

import {fork, all} from 'redux-saga/effects';
import {watchApiRequest} from './apiTester';

export default function* rootSaga() {
  yield all ([
    fork(watchApiRequest)
  ])
}

如您所见，它需要用方括号括起来yield all ([...]) 您将收到已弃用的错误，但您的代码仍然有效。我不确定如何修复已弃用的错误。

如果有人知道如何消除已弃用的错误，那就太好了。

Redux saga 没有调用 API

Redux saga not calling the API

javascript

reactjs

redux

redux-saga

react-redux