Question

我正在使用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的“操作”文件如下：

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

我使用路由导航到组件，具体取决于用户输入的端点。相同的索引文件如下：

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输出的截图如下：

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

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

编辑2 承诺的输出：

注意只有在我尝试使用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'));

编辑3：

redux devtools中的操作：

编辑4 redux devtools状态截图

Answer 1

编辑：我编辑了所有帖子以明确说明。

你的减速机：

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}};
      case FETCH_PARTICULAR_CATEGORY_POSTS:
          return  {...state, [action.category]: action.payload.data};
        default:
          return state;
    }
}

你的行动：

export function fetchPostWithCateogry(category) {
  const URL = `${API}/${category}/posts`;
  const request = axios.get(URL,{headers});

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

现在我们将category属性传递给操作，以命名我们将在其中存储我们的帖子数组的索引。

您将访问组件中的此帖子数组，但您需要迭代此数组以显示其内容：

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> {category.map(post => (<h3>{post.title}</h3>))}
          </div>
      );
    }
}

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

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

如何使用axios

1 个答案: