Requesting resource from API server - reactjs

Question

In a very conventional pattern, you have a list of posts at /posts and a detail view at /posts/1. If you have an API server on the backend and React+Redux on the frontend, you probably fetch resources when you reach /posts. But what do you do when you reach /posts/1? If you landed /posts/ first, you already have all the resources, so you can maybe do the following:
Have posts reducer that returns all the posts we fetched from API server
Have currentPost reducer that returns only the relevant post
To set currentPost you can dispatch an action that updates currentPost as soon as you click a post in the index view.
But if you landed /posts/1 without going to the index page, or refreshed /posts/1, you don't have the resources that you load in the index page (i.e. posts reducer returns []). To solve this, you can request /posts/1 from the API server and set currentPost then.
Question: Did I understand the flow correctly? I am not sure if currentPost reducer is even necessary. Also, I am not sure if it's conventional to use the resources from the index page and request a single resource only when it's necessary.

Answer 1

If you get all data you need to display currentPost in /posts request, will be sufficient to have one reducer to avoid duplicating items.
In postsReducer you need to handle two actions:
1. When you get all posts from server, your reducer should return them.
2. When you get a particular post, just append him to all posts list and return resulting array.
//reducers.js
function postsReducer(state = [], action) {
switch (action.type) {
case 'RECEIVE_POSTS':
return action.posts;
case 'RECEIVE_POST':
return [...state, action.post]
default:
return state;
}
}
PostContainer should dispatch an action to fetch currentPost. When currentPost post data will be fetched from server, you can pass it to your Post presentational component.
// PostContainer.js
class PostContainer extends Component {
componentWillMount() {
if (!this.props.post) {
this.props.dispatch(loadPost(this.props.params.id));
};
}
render() {
return (
<Post post={this.props.post}
);
}
}
function mapStateToProps(state, ownProps) {
// if you're using react-router, post id will be in `params` property.
const id = ownProps.params.id;
return {
post: state.posts.filter(post => post.id === id)[0]
};
};
export default connect(mapStateToProps)(PostContainer);
PostsListContainer should dispatch action to fetch all posts from server. When request finished successfully, you will pass array with posts to PostsList component.
// PostsListContainer.js
class PostsListContainer extends Component {
componentWillMount() {
if (!this.props.posts) {
this.props.dispatch(loadPosts());
}
}
render() {
return (
<PostsList posts={this.props.posts}
);
}
}
function mapStateToProps(state) {
return {
posts: state.posts
}
};
export default connect(mapStateToProps)(PostsListContainer);

Answer 2

A practical approach would be store all posts and request the missing ones. Supposing your posts reducer is something like this:
function posts(state = {}, action) {
switch (action.type) {
case "FETCH_ALL_POSTS":
return {...state, ...action.posts}
case "FETCH_POST":
return {...state, [action.post.id]: action.post}
default:
return state
}
}
You could define 2 actions:
One for requesting all posts (it may include pagination params)
One for requesting a single post
// Fetch all posts.
//
// In this example we are expecting the response to be like:
//
// {
// 12: {id: 12, title: "Hello", content: "..."},
// 16: {id: 16, title: "Bonjour", content: "..."},
// 54: {id: 54, title: "Hola", content: "..."},
// ...
// }
//
// If you want to return an array instead of a map the you need
// to normalize `posts`.
//
function fetchAllPosts() {
return dispatch => {
fetch("/api/posts")
.then(res => res.json())
.then(posts => dispatch({type: "FETCH_ALL_POSTS", posts}))
}
}
// Fetch a single post.
//
// Response would be:
//
// {id: 12, title: "Hello", content: "..."}
//
function fetchPost(id) {
return (dispatch, getState) => {
const state = getState()
// Check if the post is cached
if (state.posts[id]) {
dispatch({type: "FETCH_POST", post: state.posts[id]})
}
// Otherwise we must query the API
fetch(`/api/post/${id}`)
.then(res => res.json())
.then(post => dispatch({type: "FETCH_POST", post}))
}
}
Then in your components (before mounting them or after the routing) you can call the above action to trigger the loading. Let's consider you want to show the list of posts:
const PostList = connect(
state => ({
// Retrieve all posts as an array
posts: Object.values(state.posts),
}),
dispatch => ({
fetchAllPosts: () => dispatch(fetchAllPosts()),
})
)(
class PostList extends Component {
componentWillMount() {
// Load all posts if none were stored
if (this.props.posts.length === 0) {
this.props.fetchAllPosts()
}
}
render() {
return (
<ul>
{this.props.posts.map(
post => <PostItem key={post.id} id={post.id} />
)}
</ul>
)
}
}
)
const PostItem = connect(
(_, initialProps) => {
return state => ({
// Get the post data
post: state.posts[initialProps.id],
})
}
)(
class PostItem extends Component {
render() {
return (
<li>{this.props.post.title}</li>
)
}
}
)
Tada! The simple case is handled. Now if we want to display a single post, we read it from the store, or fetch it.
const PostDetails = connect(
(_, initialProps) => {
// Read the post ID from the initial properties.
// We could imagine another case where the ID is read from the location.
const {id} = initialProps
return state => {
// May, or may not, return a post
post: state.posts[id],
}
},
(dispatch, initialProps) => {
// Same as above, we need to retrieve the post ID.
const {id} = initialProps
// Prepare an action creator to load THIS post.
const fetchThisPost = () => {
dispatch(fetchPost(id))
}
return () => ({
fetchThisPost,
})
}
)(
class PostDetails extends Component {
componentWillMount() {
// Load this post if it is not cached
if (!this.props.post) {
this.props.fetchThisPost()
}
}
render() {
if (!this.props.post) {
return <Loading />
} else {
return <PostCard />
}
}
}
)