如何使用axios根据redux中的某些特定属性从api服务器过滤记录

我正在使用redux中的一个Blog项目，我从api服务器调用数据并尝试显示默认数据（现在我正在尝试检索默认数据，到目前为止我还没有实现发布到api服务器来自服务器 . 数据包含用户在博客上发布的帖子.api服务器的默认数据如下所示：

const defaultData = {
  "8xf0y6ziyjabvozdd253nd": {
    id: '8xf0y6ziyjabvozdd253nd',
    timestamp: 1467166872634,
    title: 'Udacity is the best place to learn React',
    body: 'Everyone says so after all.',
    author: 'thingtwo',
    category: 'react',
    voteScore: 6,
    deleted: false,
    commentCount: 2
  },
  "6ni6ok3ym7mf1p33lnez": {
    id: '6ni6ok3ym7mf1p33lnez',
    timestamp: 1468479767190,
    title: 'Learn Redux in 10 minutes!',
    body: 'Just kidding. It takes more than 10 minutes to learn technology.',
    author: 'thingone',
    category: 'redux',
    voteScore: -5,
    deleted: false,
    commentCount: 0
  }
}

所以，我想要做的是，我想根据一个类别筛选出帖子 . 所以，我有一个主页，列出了所有可用的类别 . 所以，当用户点击一个类别时，他/她将是进入显示该类别帖子的页面 .

redux的 "Action" 文件用于根据特定类别过滤帖子，如下所示：

import axios from 'axios';
export const FETCH_CATEGORIES = 'fetch_categories';
export const FETCH_PARTICULAR_CATEGORY_POSTS = 'fetch_particular_category';


let token;
if (!token)
  token = localStorage.token = Math.random().toString(32).substr(-8);
const API = 'http://localhost:3001';
const headers = {
                  'Accept' : 'application/json',
                  'Authorization' : 'token'
}

//Action creaor for fetching all the categories available
export function fetchCategories() {
  const URL = `${API}/categories`;
  const request = axios.get(URL,{headers});

  return dispatch => {
        return request.then((data) => {
          dispatch({
            type : FETCH_CATEGORIES,
            payload : data
          })
        })
  }
}

//Action creator to fetch all the available posts for a particular category
export function fetchPostWithCateogry(category) {
  const URL = `${API}/${category}/posts`;
  const request = axios.get(URL,{headers});

  return dispatch => {
      return request.then((data) => {
        console.log(data);
          dispatch({
            type: FETCH_PARTICULAR_CATEGORY_POSTS,
            payload: data
          })
      })
  }
}

用于显示特定类别的帖子的组件文件是：

import React, { Component } from 'react';
import { fetchPostWithCateogry } from '../actions/categories_action';
import { connect } from 'react-redux';

class CategoryView extends Component {
  componentDidMount() {
    const { category } = this.props.match.params;
    this.props.fetchPostWithCateogry(category);
    console.log(category);
  }

    render() {
      const { category } = this.props;
      console.log(category);

      if (!category) {
        return <div>Loading...</div>
      }

      return(
          <div>
            <h3>category.title</h3>
            <h5>category.category</h5>
            <h6>category.body</h6>
          </div>
      );
    }
}

function mapStateToProps({ categories },ownProps) {
    return { category: categories[ownProps.match.params.category]}
}

export default connect(mapStateToProps, {fetchPostWithCateogry})(CategoryView);

reducer 文件相同的是：

import _ from 'lodash';
import { FETCH_CATEGORIES, FETCH_PARTICULAR_CATEGORY_POSTS } from '../actions/categories_action';

export default function(state={}, action) {
    switch(action.type) {
      case FETCH_CATEGORIES:
        return {categories: {...state.categories, ...action.payload.data.categories}};
        //return {categories: [...state.categories]};

        case FETCH_PARTICULAR_CATEGORY_POSTS:
        console.log(action.payload);
        return  {...state, [action.payload]: action.payload};

        default:
          return state;
    }
}

我使用 Route 导航到组件，具体取决于用户输入的 endpoints . 相同的索引文件如下：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route } from 'react-router-dom';
import thunk from 'redux-thunk';
import './index.css';
import App from './App';
import reducers from './reducers/index.js'
import Posts from './components/posts_index';
import CreatePost from './components/new_post';
import PostDetail from './components/post_detail';
import CategoryView from './components/category';

const createStoreWithMiddleware = createStore(reducers,applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={createStoreWithMiddleware}>
      <BrowserRouter>
        <div>
          <Route  path="/new" component={CreatePost} />
          <Route path="/posts/:id" component={PostDetail} />
          <Route exact  path="/" component={Posts} />
          <Route path="/:category/posts" component={CategoryView} />   
        </div>
      </BrowserRouter>
  </Provider>  , document.getElementById('root'));

所以，我在谈论上面的最后一条路线 . 现在，问题是，我没有得到任何错误，但是没有显示类别的帖子 . 但是如果我尝试console.log从axios返回的请求响应，我可以看到所需的结果，也就是说，我看到的帖子中包含了我的路径url中输入的类别 . 我得到的console.log输出的截图如下：

任何人都可以建议我哪里出错了？提前致谢 .

EDIT 1: 尝试使用redux devtools后，我得到以下错误，如屏幕截图所示：

EDIT 2 承诺的输出：

NOTE 我只是在尝试使用redux devtools时才收到错误 . 我在使用它时做错了.Below是我的索引文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route } from 'react-router-dom';
import thunk from 'redux-thunk';
import './index.css';
import App from './App';
import reducers from './reducers/index.js'
import Posts from './components/posts_index';
import CreatePost from './components/new_post';
import PostDetail from './components/post_detail';
import CategoryView from './components/category';

const createStoreWithMiddleware = createStore(reducers,applyMiddleware(thunk),window.__REDUX_DEVTOOLS_EXTENSION__ &&
  window.__REDUX_DEVTOOLS_EXTENSION__());

ReactDOM.render(
  <Provider store={createStoreWithMiddleware}>
      <BrowserRouter>
        <div>
          <Route  path="/new" component={CreatePost} />
          <Route path="/posts/:id" component={PostDetail} />
          <Route exact  path="/" component={Posts} />
          <Route path="/:category/posts" component={CategoryView} />
        </div>
      </BrowserRouter>
  </Provider>  , document.getElementById('root'));

Edit 3:

redux devtools中的操作：

Edit 4 redux devtools状态截图