为什么redux-api-middleware不在状态中存储响应?

时间:2019-05-22 14:17:07

标签: javascript reactjs react-redux redux-api-middleware

我正在研究的项目中设置了redux-api-middleware。一切似乎都正常,并且我没有收到任何错误,但是我的有效负载没有存储在状态中。我在这里想念什么吗?

我没有从提取中得到任何错误,只是没有给我任何东西。

动作

import { API_HOST } from '../../constants';

//Pipeline Constants
export const pipelineConstants = {
  FETCH_PIPELINES: 'FETCH_PIPELINES',
  FETCH_PIPELINES_SUCCESS: 'FETCH_PIPELINES_SUCCESS',
  FETCH_PIPELINE_FAILURE: 'FETCH_PIPELINES_FAILURE' 
};

//Fetch Pipeline with redux-api-middleware
export const fetchPipelines = oAuthToken => ({
  //The parameters of the API call are specified by root properties of the [RSAA] property of an RSAA.
  [RSAA]: {
    endpoint: `${API_HOST}/config_api/index`,
    method: 'GET',
    headers: {
      authorization: oAuthToken
    },
    credentials: 'include',
    types: ['FETCH_PIPELINES', 'FETCH_PIPELINES_SUCCESS', 'FETCH_PIPELINES_FAILURE'],
  }
});

减速器


const INITIAL_STATE = {
  pipelines: [],
  expanded: false
};

const { FETCH_PIPELINES, FETCH_PIPELINES_SUCCESS, FETCH_PIPELINES_FAILURE } = pipelineConstants;

const pipelineReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case FETCH_PIPELINES:
      return Object.assign({}, state, {
        isFetching: true,
        didInvalidate: false
      });
    case FETCH_PIPELINES_SUCCESS:
      return Object.assign({}, state, {
        isFetching: false,
        didInvalidate: false,
        pipelines: action.payload
      });
    case FETCH_PIPELINES_FAILURE:
      return Object.assign({}, state, {
        isFetching: false,
        didInvalidate: true,
      });
    default:
      return state;
  }
};

export default pipelineReducer;

正在分派动作的组件

import PropTypes, { func } from 'prop-types';
import { connect } from 'react-redux';
import { compose } from 'redux';

import { fetchPipelines } from '../../redux/actions/pipelineActions/pipelineActions';

// Data container for the pipelines component, handles data for the pipelines component
const PipelineData = WrappedComponent => {
  return class extends Component {
    componentDidMount() {
      const { dispatch, oAuthToken } = this.props;
      dispatch(fetchPipelines(oAuthToken));
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

const mapStateToProps = state => {
  return {
    oAuthToken: state.userReducer.oAuthToken,
    isLoggedIn: state.pipelineReducer.isLoggedIn,
    pipelines: state.pipelineReducer.pipelines,
    expanded: state.pipelineReducer.expanded
  };
};

const composedPipelineData = compose(
  connect(mapStateToProps),
  PipelineData
);

export default composedPipelineData;

PipelineData.propTypes = {
  dispatch: func,
  oAuthToken: PropTypes.string
};

0 个答案:

没有答案