如何使用redux中的axios库导航到具有不同“id”属性的URL

时间:2018-01-02 02:33:43

标签: redux axios

我正在开发一个redux项目,我有一个帖子列表(比如Blog Post),每个帖子都有一个唯一的id。另外,我有一个不同的组件显示特定帖子的详细信息(我已将其命名为Post_Detail组件)。所以我想要做的是当我点击帖子列表中的特定帖子时,我想导航到显示该特定帖子详细信息的页面。

我的操作创建者用于显示所选帖子:

//Action Creator for displaying a selected post
export function fetchPost(id) {
    const request = axios.get(`${API}/posts/${id}`,{headers});

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

用于显示所选帖子的我的Post_Detail组件是:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchPost, deletePost } from '../actions/posts_action';

class PostDetail extends Component {
    componentDidMount() {
        const  { id } = this.props.match.params;
        this.props.fetchPost(id);
        console.log(id)
    }

    //Function for deleting on click using action creator
    onDeleteClick() {
      const { id } = this.props.match.params;
      this.props.deletePost(id, () => {
        this.props.history.push('/');
      });
    }

    render() {
      const { post } = this.props;

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

      return(
        <div>
          <div>
            <h3>{post.title}</h3>
            <h6>Categories: {post.category}</h6>
            <p>{post.body}</p>
          </div>
          <button
            className="btn btn-danger pull-xs-right"
            onClick={this.onDeleteClick.bind(this)} >
            Delete Post
          </button>
        </div>
      );
    }
}

function mapStateToProps({ posts }, ownProps) {
    return { post: posts[ownProps.match.params.id] };
}

export default connect(mapStateToProps, { fetchPost, deletePost })(PostDetail);

我列出所有可用帖子的主页是:

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';
import { compose } from 'redux';
import { Link } from 'react-router-dom';

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const createStoreWithMiddleware = createStore(reducers, composeEnhancers(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'));

所以,现在发生的事情是,如果我尝试使用网址中的该帖子的“id”导航到帖子,例如: http://localhost:3000/posts/8xf0y6ziyjabvozdd253nd 其中“8xf0y6ziyjabvozdd253nd”是id在那篇文章中,我可以导航到Post_Detail组件并查看该帖子的详细信息。但是,当从主页中的帖子列表中点击帖子时,我无法弄清楚如何导航到Post_Detail组件。我知道我应该使用'react-router-dom'中的“链接”并导航到传递链接的“到”属性中的网址的页面,但我不知道如何动态更改链接中的ID。谁能指导我如何继续?

0 个答案:

没有答案