How to read updated state in react-redux app? - reactjs

Question

I am learning Redux and trying to Add/View users using redux in my react app.By using 'ref' in react, I am reading the payload(name,account_number) of new user and passing to 'addProfile' action creator onClick of 'Add' button in this way -
AddView.js
import React from 'react';
import { connect } from 'react-redux';
import { addProfile } from '../actions';
class AddView extends React.Component{
addValues(){
return(
<div>
Name : <input type="text" value={this.props.profiles.name} ref={el => this.nameValue=el}/>
Account Number : <input type="text" value={this.props.profiles.account_number} ref={el => this.accountValue=el}/>
<button onClick={() => this.props.addProfile(this.nameValue,this.accountValue)}>Add</button>
</div>
);
}
render(){
return (
<div>
Add Profile
<br /><br />
{this.addValues()}
</div>
);
}
}
const mapStateToProps = (state) => {
return { profiles : state.profiles }
}
export default connect(mapStateToProps, {addProfile}) (AddView);
Now am trying to console log the name,account_number in my action creator but I get html instead of values.
export const addProfile = (name, account_number) => {
console.log(name,account_number)
return{
type :'ADD_PROFILE',
payload : {
name : name,
account_number : account_number
}
};
}
Can anyone please help where I went wrong. Full code here - https://codesandbox.io/s/239j97y36p

Answer 1

React refs give you a ref to the dom element, if you just want the value of the input you can get it with .value. I would also rename your ref variables then to be accurate like nameInputRef and accountInputRef.
Name :{" "}
<input
type="text"
value={this.props.profiles.name}
ref={el => (this.nameInputRef = el)}
/>
Account Number :{" "}
<input
type="text"
value={this.props.profiles.account_number}
ref={el => (this.accountInputRef = el)}
/>
<button
onClick={() =>
this.props.addProfile(this.nameInputRef.value, this.accountNumberRef.value)
}
> Add
</button>
You can see full sample adapted from yours here: https://codesandbox.io/s/k3mp28lr3o

Answer 2

class UserProfile extends Component {
constructor(props) {}
render() {
// ref={el => this.nameValue=el} to access input variable
// or
// use onChange event which fire another dispatcher which mutate profile state since we assign input values to profile state you can use state to get latest values
//this.props.profiles
//this.props.onAddProfile()
}
}
const mapStateToProps = state => {
return {
profiles : state.profiles
}
}
const mapDispatchToProps = dispatch => {
return {
onAddProfile:dispatch(addProfile())
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(UserProfile);

Answer 3

You are assigning the element into the variable during the onclick event.
ref={el => this.nameValue=el}
You can use a local state to store the value of the while onChange instead of ref

Answer 4

npm install redux-thunk --save
profile.jsx
class Profile extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<input
type="text"
onChange={({ target }) =>
this.props.onUsernameUpdated(target.value)
}
value={this.props.profile.username}
placeholder="Username"
/>
<input
type="text"
onChange={({ target }) =>
this.props.onAccNumberUpdated(target.value)
}
value={this.props.profile.accNumber}
placeholder="Account Number"
/>
<button onclick={this.props.onUpdateProfile}>Submit</button>
</div>
)
}
}
const mapStateToProps = state => {
return {
profile: state.profile
};
};
const mapDispatchToProps = dispatch => {
return {
onUsernameUpdated: username => dispatch(usernameUpdated(username)),
onAccNumberUpdated: password => dispatch(accNumberUpdated(accNumber)),
onUpdateProfile: () => dispatch(updateProfile())
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Profile);
actions.js
export function usernameUpdated(username) { // need reducer to update state profile name
return {
type: 'USER_NAME_UPDATE',
data: username
}
}
export function accNumberUpdated(accNumber) { // need reducer to update state profile acc number
return {
type: 'ACC_NUM_UPDATE',
data: accNumber
}
}
export function updateProfile() {
return (dispatch, getState) => { //thunk magic
// latest profile after user input
const profile = getState().profile
}
}