reactjs - Creating a Show/Detail Page in React-Redux, How to Properly Pass Down Props -


i'm brand new react-redux, picked last week , given assignment create simple application can create, update, destroy , view posts.

i extremely frustrated cannot figure out why cannot pass props show page.

i have link on each post in index page , when clicked, supposed take detailed page of post.

when go show page, current post in state, never renders.

i know true because using logger middleware , there 1 post in state, 1 want render.

in map state props, post, supposed point current post, undefined, , error when trying access it. assuming problem there (in mapstatetoprops).

i feel in on head material. there standard guidelines follow when creating store/reducers, make passing down information easier/more straight forward? guidance appreciated.

relevant action creators/ajax call

export const receivepost = (post) => ({   type: receive_post,   post })  export const requestsinglepost = (id) => (dispatch) => (   apiutil.fetchsinglepost(id).then(post => dispatch(receivepost(post))) );  export const fetchsinglepost = (id) => {   return $.ajax({     method: 'get',     url: `api/posts/${id}`   }) } 

reducer:

const postreducer = (state = {}, action) => {   object.freeze(state);      switch(action.type) {       case receive_all_posts:         return merge({}, state, action.posts)       case receive_post:         const newpost = { currentpost: {[action.post.id]: action.post}}         return merge({}, state, newpost)       case remove_post:         const nextstate = merge({}, state);         delete nextstate[action.post.id];         return nextstate;       default:         return state;     }; };  export default postreducer; 

rootreducer

import { combinereducers } 'redux'; import postreducer './post_reducer';  const rootreducer = combinereducers({   posts: postreducer, });  export default rootreducer; 

container

import { connect } 'react-redux'; import postdetailview './post_detail_view'; import { requestsinglepost } '../../actions/post_actions';  const mapstatetoprops = (state) => ({   post: state.posts.currentpost });  const mapdispatchtoprops = dispatch => ({   requestsinglepost: id => dispatch(requestsinglepost(id)) });  export default connect(   mapstatetoprops,   mapdispatchtoprops )(postdetailview); 

component

import react 'react' import { link } 'react-router'  class postdetailview extends react.component {   componentdidmount() {     this.props.requestsinglepost(this.props.match.params.postid);   }    componentwillreceiveprops(newprops) {     if (newprops.match.params.postid !== this.props.match.params.postid) {       this.props.requestsinglepost(newprops.match.params.postid);     }   }      render () {        if (!this.props.post) {         return null;       }          return (           <div>             <h3>{this.props.post.title}</h3>             <p>{this.props.post.body}</p>           </div>         );       }     }   export default postdetailview; 


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -