How to take input value from submit form and store in redux store variable?

Question

I have made a bank account submit form. I want to save the data which is entered in the form into redux store. How can I take input value from form and store it in redux store variable ?

My client.js file has redux store and form.js is the component from which I need to get the input values. client.js:

import { combineReducers, createStore } from 'redux';

const addUserReducer = (state={}, action) => {
    switch(action.type){
        case: "CHANGE_FIRSTNAME"{
            state = {...state, firstname:action.payload }
            break;
        }
        case: "CHANGE_LASTNAME"{
            state = {...state, lastname:action.payload }
            break;
        }
        case: "CHANGE_EMAILID"{
            state = {...state, emailid:action.payload }
            break;
        }
        case: "CHANGE_IBAN"{
            state = {...state, iban:action.payload }
            break;
        }
        case: "CHANGE_BANKNAME"{
            state = {...state, bankname:action.payload }
            break;
        }
    } 
    return state;
}

const reducers = combineReducers({
    addUser:addUserReducer
})


const store = createStore(reducers);

store.subscribe(() => {
    console.log('Store changed', store.getState());
})

store.dispatch({type: "CHANGE_FIRSTNAME", payload:"Will"});
store.dispatch({type: "CHANGE_LASTNAME", payload:"Groot"});
store.dispatch({type: "CHANGE_EMAILID", payload:"[email protected]"});
store.dispatch({type: "CHANGE_IBAN", payload:3234243242});
store.dispatch({type: "CHANGE_BANKNAME", payload:"XYZ"});

form.js:

import React, { Component } from "react";
import "./form.css";

class Form extends Component {
  render() {
    return (
      <div>
        <div id="center">
          <form>
            <div className="form-group">
              <label for="firstname">First Name:</label>
              <input type="firstname" className="form-control" id="firstname" />
            </div>

            <div className="form-group">
              <label for="lastname">Last Name:</label>
              <input type="lastname" className="form-control" id="lastname" />
            </div>

            <div className="form-group">
              <label for="email">Email address:</label>
              <input type="email" className="form-control" id="email" />
            </div>

            <div className="form-group">
              <label for="bankacc">IBAN:</label>
              <div id="deletebank" className="items">
                <input type="bankacc" className="form-control" id="bankacc" />
                <button type="button" class="btn btn-default btn-sm">
                  <span class="glyphicon glyphicon-trash" />
                </button>
              </div>
            </div>

            <div className="form-group">
              <label for="bankname">Bank Name:</label>
              <input type="bankname" className="form-control" id="bankname" />
            </div>

            <div className="form-group">
              <button type="button" className="btn addbank">
                + Add bank account
              </button>
            </div>

            <div className="form-group">
              <button type="button" class="btn btn-success">
                Submit
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default Form;

Screenshot of my form:

@TomaszMularczyk How can I take input from submit form and store info about particular user on submitting the form. How can I implement it using redux and react. — stone rock
– stone rock, Commented May 27, 2018 at 7:39
How did you achieve this I am supposed to do exactly the same. Please help. I do not want to use action creators and I want to do this using react and react-redux. — cooler
– cooler, Commented May 24, 2019 at 7:58

Tomasz Mularczyk · Accepted Answer · 2018-05-27 07:50:03Z

I would recommend react-redux to connect your components with redux store, however it is still doable without it:

Create action creators that will update specific variable in the store:

import { bindActionCreators } from "redux";

const updateFirstName = name => ({ type: "CHANGE_FIRSTNAME", payload: name });
const updateLastName = lastName => ({
  type: "CHANGE_LASTNAME",
  payload: lastName
});
const updateEmail = email => ({ type: "CHANGE_EMAILID", payload: email });
const updateIban = iban => ({ type: "CHANGE_IBAN", payload: iban });
const updateBankName = bankName => ({
  type: "CHANGE_BANKNAME",
  payload: bankName
});

Now bind your action creators with dispatch, so calling actionCreators.updateFirsName('something') will actually dispatch an action to the store.

export const actionCreators = bindActionCreators(
  {
    updateFirstName,
    updateLastName,
    updateEmail,
    updateIban,
    updateBankName
  },
  store.dispatch
);

Now you only need to call each store-updating function whenever theres an change on the input:

import React, { Component } from "react";
import "./form.css";
import { actionCreators } from "/path/to/store";

class Form extends Component {
  render() {
    return (
      <div>
        <div id="center">
          <form>
            <div className="form-group">
              <label for="firstname">First Name:</label>
              <input
                type="firstname"
                className="form-control"
                id="firstname"
                onChange={e => actionCreators.updateFirstName(e.target.value)}
              />
            </div>

            <div className="form-group">
              <label for="lastname">Last Name:</label>
              <input
                type="lastname"
                className="form-control"
                id="lastname"
                onChange={e => actionCreators.updateLastName(e.target.value)}
              />
            </div>

            <div className="form-group">
              <label for="email">Email address:</label>
              <input
                type="email"
                className="form-control"
                id="email"
                onChange={e => actionCreators.updateEmail(e.target.value)}
              />
            </div>

            <div className="form-group">
              <label for="bankacc">IBAN:</label>
              <div id="deletebank" className="items">
                <input
                  type="bankacc"
                  className="form-control"
                  id="bankacc"
                  onChange={e => actionCreators.updateIban(e.target.value)}
                />
                <button type="button" class="btn btn-default btn-sm">
                  <span class="glyphicon glyphicon-trash" />
                </button>
              </div>
            </div>

            <div className="form-group">
              <label for="bankname">Bank Name:</label>
              <input
                type="bankname"
                className="form-control"
                id="bankname"
                onChange={e => actionCreators.updateBankName(e.target.value)}
              />
            </div>

            <div className="form-group">
              <button type="button" className="btn addbank">
                + Add bank account
              </button>
            </div>

            <div className="form-group">
              <button type="button" class="btn btn-success">
                Submit
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default Form;

Collectives™ on Stack Overflow

How to take input value from submit form and store in redux store variable?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related