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

Option 1: Do it yourself

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

Option 2: Clone my repo

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

Option 3: Play in CodeSandbox

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 {
  combineReducers,
  createStore,
} from 'redux';

// 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);
  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 from 'react';

import { connect } from 'react-redux';

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

// App.js
export class App extends React.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 => ({
  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')
);