Vaibhav Kohli    Archive    About

Building a react-redux app

In this post we will only cover how to integrate React & Redux and will not go into the basics of react and redux.

We will build a simple app which consumes lastfm api and allow users to search artists.

We will use official create-react-app to scaffold our app. This does all the configuration of babel and webpack for us.

So lets install this npm package and create our app

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

Now our react app is up and running.

Currently our index.js file looks like this

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

  <App />,

To integrate redux we will need two packages redux and react-redux. Lest install them

npm install --save redux
npm install --save react-redux

To understand react redux integration first we will have to understand the idea of separating presentational and container components. Read it here first. So presentational components will be normal react components and their purpose will be how things look and they are not aware of redux. Container components on the other hand will subscribe to redux state and will do data fetching, state updates etc.

Lets build a presentation component first and then we will build a container component.

import React, { Component } from 'react';

class Search extends Component {
  render() {
    return (
        Search music artist <input type='text' onChange={(e) => this.props.fetchPosts(}/>

export default Search;

Container component

import React, { Component } from 'react';
import { connect } from 'react-redux'
import Search from './Search.js'
import {fetchPosts, fetchPostsSuccess} from '../actions/index.js';

const mapDispatchToProps = (dispatch) => {
  return {
    fetchPosts: (query) => {
      dispatch(fetchPosts(query)).then((response) => {

const SearchContainer = connect(

export default SearchContainer;

So here connect function provided by react-redux creates a new component that wraps around our existing search component. This pattern is called Higher-Order Components. To use connect we also need to define two special functions called mapStateToProps and mapDispatchToProps. mapStateToProps transforms the current Redux store state into the props that we want to pass to our presentational component. And mapDispatchToProps receives the dispatch() methods and return callback props that we want to inject into our presentational component.

After integrating redux our index.js file will look like this

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import App from './App';
import './index.css';
import redditApp from './reducers/index.js'
import promise from 'redux-promise';

let store = createStore(redditApp, applyMiddleware(promise))

  <Provider store={store}>
    <App />

So lets see what has changed here. There is something new called as Provider <Provider store={store}></Provider> which we have imported from react-redux. And this provider takes store created from createStore of redux as a prop. So what is happening here? All container components need access to the Redux store so they can subscribe to it. To do this we use special Provider component which makes the store available to all container components.

To make async data fetching calls we are using promise based axios library. But to dispatch the resolved value of the promise we will need to use redux-promise middleware.

Next - See the source code for this app. Read official react and redux docs.