A short and condensed example using ReactJS and Redux

redux_sample_in_one_file.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import { createStore, combineReducers } from 'redux'
import { Provider, connect } from 'react-redux'
import Hello from './Hello';
import './style.css';

const CHANGENAME = 'CHANGENAME'
const action = (name) => ({
  type: CHANGENAME,
  payload: name
})

const name = (state={}, action) => {
  switch(action.type){
    case CHANGENAME:
      return {...state, value: action.payload}
    default:
      return state
  }
}

const reducers = combineReducers(
  {name}
)

class App extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <Hello name={this.props.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <button onClick={() => this.props.action('name')}>Click me</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  name: state.name.value
})

const Apps = connect(
 mapStateToProps,
 {action}
)(App)


const store =  createStore(reducers)
render(
  <Provider store={store}>
    <Apps />
  </Provider>, 
document.getElementById('root'));