Super Simple React Redux Example

This React Redux example is the bare minimum it takes to get an application up and running. It is under 100 lines and consists of just two files (with dependencies).

These two files will show you start to finish how to make a redux store, create some actions, and connect them to a component.

It's the simplest example of the entire React Redux lifecycle I could come up with.

Setup

npm install -g create-react-app  
create-react-app my-simple-app  
cd my-simple-app  
npm install --save redux react-redux redux-thunk  
echo '' > src/redux.js  

OR... you can clone my repo where I've already done the steps above and below for you:

git clone git@github.com:tylerbuchea/my-simple-app.git  
cd my-simple-app  
npm install  
npm start  

You can also view the working simple app here: https://codesandbox.io/s/github/tylerbuchea/my-simple-app

redux.js

This file contains the store, actions, and reducers all wrapped up into one. For more advanced applications with more actions you would break this file up into parts.

I've put file name comments above each section to illustrate where they would go if you were to break them up into separate files.

import {  
  applyMiddleware,
  combineReducers,
  createStore,
} from 'redux';

import thunk from 'redux-thunk';

// actions.js
export const activateGeod = geod => ({  
  type: 'ACTIVATE_GEOD',
  geod,
});

export const closeGeod = () => ({  
  type: 'CLOSE_GEOD',
});

// reducers.js
export const geod = (state = {}, action) => {  
  switch (action.type) {
    case 'ACTIVATE_GEOD':
      return action.geod;
    case 'CLOSE_GEOD':
      return {};
    default:
      return state;
  }
};

export const reducers = combineReducers({  
  geod,
});

// store.js
export function configureStore(initialState = {}) {  
  const store = createStore(
    reducers,
    initialState,
    applyMiddleware(thunk)
  )
  return store;
};

export const store = configureStore();  

App.js

I've put the React component and the Redux "container" connection logic into one file for clarities sake. If you want you can break the two sections up into separate files by referencing the filename comments I've added.

import React, {  
  Component,
} from 'react';

import { connect } from 'react-redux';

import {  
  activateGeod,
  closeGeod,
} from './redux';

// App.js
export class App extends Component {

  render() {
    return (
      <div>

        <h1>{this.props.geod.title || 'Hello World!'}</h1>

        {this.props.geod.title ?
          <button onClick={this.props.closeGeod}>
            Exit Geod
          </button> :
          <button onClick={() => this.props.activateGeod({ title: 'I am a geo dude!' })}>
            Click Me!
          </button>
       }

      </div>
    );
  }

}

// AppContainer.js
const mapStateToProps = (state, ownProps) => ({  
  geod: state.geod,
});

const mapDispatchToProps = {  
  activateGeod,
  closeGeod,
};

const AppContainer = connect(  
  mapStateToProps,
  mapDispatchToProps
)(App);

export default AppContainer;  

index.js

You'll also need to update your index React component to connect Redux to your application. It is a simple two step process and looks like this:

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

// Add these imports - Step 1
import { Provider } from 'react-redux';  
import { store } from './redux';

// Wrap existing app in Provider - Step 2
ReactDOM.render(  
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);