export const addName = action => {
  return{
    type:'ADD_ENTRY',
    ...action
  };
};

export const AddReducer = (state = [], action) =>{

  switch (action.type) {
    case 'ADD_ENTRY':
      return [
        ...state,
        {
          firstName:action.firstName,
          passWord:action.passWord
        }
      ]
    default:
      return state;
  }
};

import React,{Component} from "react";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import * as action from './action';
let firebase = require('firebase')
var config = {
    apiKey: "AIzaSyAvq3s-3kjAGMHoeR_dKP9BLDltdO-76nA",
    authDomain: "simple-a9455.firebaseapp.com",
    databaseURL: "https://simple-a9455.firebaseio.com",
    projectId: "simple-a9455",
    storageBucket: "simple-a9455.appspot.com",
    messagingSenderId: "808115210516"
  };
  firebase.initializeApp(config);
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      uname: '',
      pass: ''
    };
  }
  inputData = event => {
    this.setState({
      [event.target.name]:event.target.value
    });
  }
  submitData = event => {
    event.preventDefault();
    firebase
     .database()
     .ref('Entry/'+this.state.uname)
     .set({
       uname:this.state.uname,
       pass:this.state.pass
     });
     this.props.action.addName({
       userName:this.state.uname,
       passWord:this.state.pass
     });
  }
  render(){
    return(
      <div>
        <form onSubmit={this.submitData}>
          UserName:
          <input type="text" name="uname" onChange={this.inputData}/>
          Password:
          <input type="text" name="pass" onChange={this.inputData}/>
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}
function mapStateToProps(state){
  return {
    userName : state.userName,
    passWord : state.passWord
  };
};
function mapDispatchToProps(dispatch) {
  return{
    action: bindActionCreators(action,dispatch)
  };
};
export default connect(mapStateToProps,mapDispatchToProps)(App)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from "react-redux";
import {AddReducer} from './reducers/name';
import {createStore} from "redux";
import registerServiceWorker from './registerServiceWorker';
let store = createStore(AddReducer)
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'));
registerServiceWorker();