反应redux api中间件无法正常工作

时间:2017-08-31 08:03:46

标签: reactjs redux react-redux

我正在使用Redux API中间件来调用数据的api

Action.js

import { CALL_API } from 'redux-api-middleware';

export const FETCH_POSTS = 'FETCH_POSTS';
export const FETCH_POSTS_SUCCESS = 'FETCH_POSTS_SUCCESS';
export const FETCH_POSTS_FAILURE = 'FETCH_POSTS_FAILURE';

export const fetchPosts = () => ({
  [CALL_API]: {
     types: [

  {
        type: FETCH_POSTS,
        payload: (action, state) => ({ action: state })
      },
      {
        type: FETCH_POSTS_SUCCESS,
        payload: (action, state, response) => {
          return response
        }
      },
      FETCH_POSTS_FAILURE

     ],
    endpoint: 'http://localhost:8080/v1/career/',
    method: 'GET',
  }
});

Reducer.js

import {
  FETCH_POSTS,
  FETCH_POSTS_SUCCESS,
  FETCH_POSTS_FAILURE
} from '../actions/Action';

import {combineReducers} from 'redux'

const INITIAL_STATE = { postsList: { posts: [], error: null, loading: false } };

export const posts=(state = INITIAL_STATE, action)=> {
  let error;
  switch(action.type) {

  case FETCH_POSTS:
    return { ...state, postsList: { posts: [], error: null, loading: true} };
  case FETCH_POSTS_SUCCESS:
    return { ...state, postsList: { posts: action.payload, error: null, loading: false } };
  case FETCH_POSTS_FAILURE:
    error = action.payload.data || { message: action.payload.message };
    return { ...state, postsList: { posts: [], error: error, loading: false } };

  default:
    return state;
  }
export const reducers=combineReducers({

    posts:posts
    });
export default reducers;

Store.js

import {
  applyMiddleware,
  createStore,compose
} from 'redux';

import { apiMiddleware } from 'redux-api-middleware';
import reducers from './reducer'


export function ConfigureStore(IntitialState={}){
    const stores=createStore(reducers,IntitialState,compose(
        applyMiddleware(apiMiddleware),
         window.devToolsExtension ? window.devToolsExtension() : f => f
        ));
    return stores;
}; 
 export const  store=ConfigureStore()

我只能看到FETCH POSTS正在运行,当我检查状态时我得到了这个

enter image description here

我检查了开发人员工具的网络部分。响应来自服务器 enter image description here

我的回答是enter image description here

我不知道为什么这不起作用。请有人帮助我。谢谢。

0 个答案:

没有答案