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
Post a Comment