CODEWITHSUNDEEP
reduxreact-redux
MUI Guy
MUI Guy

Reputation: 63

React-Redux dispatch action and read state

Trying to understand redux concepts by passing the value of first textbox to second.

//File 1 - Class component

import React, { Component } from 'react';
import { actionCreators } from '../store/CustomerInvoice';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

class CustomerInvoice extends Component {
    constructor(props) {
        super(props);
        this.state = {
            accountId: "",
            customerName: ""
        }
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        var name = event.target.name;
        var value = event.target.value;
        this.setState({ [name]: value });
        this.props.accountEntered(value);
    }

    render() {
        return (
            <form>
                <div className="form-group">
                    <label htmlFor="accountId">Account Id:</label>
                    <input type="text" className="form-control" name="accountId" placeholder="Account Id" value={this.state.accountId} onChange={this.handleChange} />
                    <small id="accountId" className="form-text text-muted">Enter customer accound Id</small>
                </div>
                <div className="form-group">
                    <label htmlFor="customerName">Customer name:</label>
                    <input type="text" className="form-control" name="customerName" placeholder="Customer name" value={this.test}  />
                </div>
               
                <button type="submit" className="btn btn-primary">Submit</button>
            </form>
        )
    }
}

const mapStateToProps = state => ({
    test: state.test
});

export default connect(
    mapStateToProps,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(CustomerInvoice);

//File 2 - Redux

const accountIdEntered = 'ACCOUNT_ENTERED';
const initialState = { test: "" };

export const actionCreators = {
    accountEntered: (content) => ({
        type: accountIdEntered,
        payload: {
            content
        }
    })
}

export const reducer = (state, action) => {
    state = state || initialState;

    if (action.type === accountIdEntered) {
        return { ...state, test: action.content };
    }

    return state;
}

Not sure where the issue is. Please help me in resolving the issue. Basically I would like to understand practically the concept of redux, where I can dispatch an action, modify some value and read the value from the store.

Upvotes: 0

Views: 167

Answers (1)

Aadil Mehraj
Aadil Mehraj

Reputation: 2614

First if you check your action accountEntered is returning content inside payload:

accountEntered: (content) => ({
        type: accountIdEntered,
        payload: {
            content
        }
    })

So, when you dispatch the action in the reducer you need to get the data from the action properly, i.e., action.payload.content :

export const reducer = (state, action) => {
    state = state || initialState;

    if (action.type === accountIdEntered) {
        return { ...state, test: action.payload.content };
    }

    return state;
}

Also you can install the Redux Dev tools chrome extension, for visualising when action is dispatched and how reducer state changes as well etc.

Upvotes: 3

Related Questions