CODEWITHSUNDEEP
reactjsreduxreact-redux
An User
An User

Reputation: 231

Need help to call an action using redux as well as update Component State on a single event of Click?

I am trying to learn Redux by simply add/delete users. I have an action 'ADD_PROFILE', with payload : name,account-number. On clicking add button, I wanted to update the store, hide the 'add user' form and show a message 'User added successfully'. If it is in React, I can have a boolean state variable, update/reset variable and switch the views. If I wanted to do the same using Redux bit not sure how.

This is what I tried :

Action

export const addProfile = (name, account_number) => {

    console.log(name, account_number)
    return{
        type :'ADD_PROFILE',
        payload : {
            name : name,
            account_number : account_number
        }
    };
}

Reducer:

export default (profilesList=[],action) => {

    switch(action.type){
        case 'ADD_PROFILE':
            return [...profilesList, action.payload]
        case 'DELETE_PROFILE':
            return profilesList.filter(name => name!== action.payload.name)
        default:
            return profilesList;
    }

}

AddView.js

import React from 'react';
import { connect } from 'react-redux';

import { addProfile } from '../actions';

class AddView extends React.Component{

    constructor(props) {
        super(props);
         this.state={
             isProfileAdded: false
         };
     }

    addValuesView(){
        return(
            <div>
                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.setState(isProfileAdded=true),
                        this.props.addProfile(this.nameInputRef.value,this.accountInputRef.value) 
                }

                }>Add</button>

            </div>
        );

    }

    profileAddedView(){
        return(
            <div>Profile added succesfully</div>
        )
    }

    view(){
        return !this.props.profiles.isProfileAdded ? this.addValuesView() : this.profileAddedView()
    }

    render(){
        console.log(this.state)
        return this.view()
    }

}

const mapStateToProps = (state) => {

    return { profiles : state.profiles }
}

const mapDispatchToProps = dispatch => ({
onAddProfile:  dispatch(addProfile())
});
export default connect(mapStateToProps, {addProfile}) (AddView);

App.js

import React from 'react';
import AddView from './AddView';

const App = () =>{
    return (
        <div className="ui container">
            <AddView />

        </div>
    );
}

export default App;

Upvotes: 2

Views: 44

Answers (1)

Smolin Pavel
Smolin Pavel

Reputation: 510

Method this.setState should receive an object:

() => {
   this.setState({ isProfileAdded: true});
   this.props.addProfile(this.nameInputRef.value, this.accountInputRef.value); 
}

Upvotes: 1

Related Questions