Hacker News

This example shows how to use redux-query, redux-query-react, and redux-query-interface-superagent to build a basic Hacker News client. You can run this example in the browser by clicking the button below:

Entry point

index.js

import React from 'react'; import { render } from 'react-dom'; import HackerNews from './components/HackerNews'; import store from './store'; render(<HackerNews store={store} />, document.getElementById('root')); 

Redux store

store.js

import { applyMiddleware, createStore, combineReducers } from 'redux'; import { entitiesReducer, queriesReducer, queryMiddleware } from 'redux-query'; import superagentInterface from 'redux-query-interface-superagent'; export const getQueries = state => state.queries; export const getEntities = state => state.entities; const reducer = combineReducers({ entities: entitiesReducer, queries: queriesReducer, }); const store = createStore( reducer, applyMiddleware(queryMiddleware(superagentInterface, getQueries, getEntities)), ); export default store; 

Query configs

query-configs/stories.js

export const topStoriesRequest = () => { return { url: `https://hacker-news.firebaseio.com/v0/topstories.json`, transform: body => ({ // The server responds with an array of IDs topStoryIds: body, }), update: { topStoryIds: (prev, next) => { // Discard previous `response` value (we don't need it anymore). return next; }, }, }; }; export const itemRequest = itemId => { return { url: `https://hacker-news.firebaseio.com/v0/item/${itemId}.json`, transform: body => ({ // The server responds with the metadata for that item itemsById: { [itemId]: body, }, }), update: { itemsById: (prev, next) => { return { ...prev, ...next, }; }, }, }; }; 

Selectors

selectors/stories.js

const emptyArray = []; export const getTopStoryIds = state => { return state.entities.topStoryIds || emptyArray; }; export const getItem = (state, itemId) => { return (state.entities.itemsById || {})[itemId]; }; 

Components

components/Item.js

import * as React from 'react'; import { useSelector } from 'react-redux'; import { useRequest } from 'redux-query-react'; import * as storyQueryConfigs from '../query-configs/stories'; import * as storySelectors from '../selectors/stories'; const Item = props => { const [{ isPending }] = useRequest(storyQueryConfigs.itemRequest(props.itemId)); const item = useSelector(state => storySelectors.getItem(state, props.itemId)); return ( <li> {isPending && 'Loading…'} {!!item && ( <div> <div> <a href={item.url} target="_blank" rel="noopener noreferrer"> {item.title} </a> </div> <div> {item.score} points by{' '} <a href={`https://news.ycombinator.com/user?id=${item.by}`} target="_blank" rel="noopener noreferrer" > {item.by} </a> </div> </div> )} </li> ); }; export default Item; 

components/TopStories.js

import * as React from 'react'; import { useSelector } from 'react-redux'; import { useRequest } from 'redux-query-react'; import Item from '../components/Item'; import * as storyQueryConfigs from '../query-configs/stories'; import * as storySelectors from '../selectors/stories'; const TopStories = props => { useRequest(storyQueryConfigs.topStoriesRequest()); const topStoryIds = useSelector(storySelectors.getTopStoryIds); return ( <ol> {topStoryIds.slice(0, 30).map(itemId => ( <Item itemId={itemId} key={itemId} /> ))} </ol> ); }; export default TopStories; 

components/HackerNews.js

import * as React from 'react'; import { Provider } from 'react-redux'; import { Provider as ReduxQueryProvider } from 'redux-query-react'; import TopStories from '../components/TopStories'; import { getQueries } from '../store'; const HackerNews = props => { return ( <Provider store={props.store}> <ReduxQueryProvider queriesSelector={getQueries}> <> <h1>Hacker News</h1> <TopStories /> </> </ReduxQueryProvider> </Provider> ); }; export default HackerNews;