Action.js

import { PROCESS_NUMBER } from '../Constants/ActionTypes';

export function processNumber(number) {
  return { type: PROCESS_NUMBER, number }
}

ActionTypes.js

export const PROCESS_NUMBER = 'PROCESS_NUMBER';

App.jsx

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { processNumber } from '../Actions/Actions';
import CreditCardInput from './CreditCardInput';


export default class App extends Component {
  render() {
    const {dispatch, number, card } = this.props;
    console.log("this is the props being passed ", number);
    return (
      <div>
        <CreditCardInput number={number} onInput={ number => dispatch(processNumber(number))} />
        <input type="text" value={card} readOnly />
      </div>
    );
  }

}

function select(state) {
    console.log("select function's state is", state);

  return {
    number: state.number,
    card: state.card
  }
}
export default connect(select)(App);

CreditCardInput.jsx

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


export default class CreditCardInput extends Component {
  render() {
    return(
        <input type="text" value={this.props.number} onChange={(e) => this.handleChange(e)} />
    );
  }

  handleChange(e) {
    const node = e.target.value;
    const number = node.trim();
    this.props.onInput(number);
    console.log("handle change has been invoked with value ", number);
  }

}
CreditCardInput.propTypes = {
  number: PropTypes.string.isRequired
}

index.jsx

import React from 'react';
import { render } from 'react-dom';
import App from './components/App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './Reducers/Reducers';

let store = createStore(reducer);

let rootElement = document.createElement('div');
document.body.appendChild(rootElement);

render (
  <Provider store={store}>
    <App />
  </Provider>, rootElement
);

reducers.js

import { PROCESS_NUMBER } from '../Constants/ActionTypes';

const initialState = {
  number: '',
  card: ''
}

const cardProviders = {
  'Visa': /^4/,
  'MasterCard': /^5[1-5]/,
  'American Express': /^3[47]/
}

function reducer(state = initialState, action) {

  const checkCard = ( number = state.number ) => {
    for ( var card in cardProviders) {
      if (number.match(cardProviders[card])) {
        return card;
      }
    }
  }

  switch(action.type) {
    case 'PROCESS_NUMBER':
      return {
        ...state,
        number: action.number.replace(/\s/g, '').replace(/(.{4})/g, '$1 '),
        card: checkCard(action.number)
       }
    default:
      return state;
  }
}

export default reducer;