How to send data between components redux/react

Question

I'm trying to learn redux and react, I'm trying to create CRUD app, so far I made Insert/Delete, I also did update logic but I'm struggling on how to send data from one row in my table (when clicking button 'Editar') to my form on the left side. Each side is a different component, the simplest way I thought was using getElementById and fill the fields but when doing this react takes it as a blank input when I try to save. The other option was using redux creating a getId action and call it from my 'Editar' button but don't know how to send data to my other container after executing the action.

Any hint would be helpful.

My Application

tanmay · Accepted Answer · 2018-03-05 06:12:08Z

2

install react-redux and use the connect function from that. Example:

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

class ExampleComponent extends Component {
    render() {

        const something = this.props.something; // in case you need to read part of the redux state

        const mydata='something'; // data from this component

        return (
            <div>
                <button onClick={()=>{this.props.sendData({data: mydata})}}>Send Data</button>
            </div>
        );
    }
}


// map state
function mapStateToProps(state) {
    return {
        something: state.something
    }
}

// map dispatch
function mapDispatchToProps(dispatch) {
    return {
        sendData: (data) => {
            dispatch({type:'SOME_TYPE_FOR_REDUCER', payload:data})
        }
    }
}

// connect and export
export default connect(mapStateToProps, mapDispatchToProps)(ExampleComponent);

edited Mar 5, 2018 at 6:12

tanmay

7,9112 gold badges24 silver badges39 bronze badges

answered Mar 5, 2018 at 5:58

Afzal Hossain

3,3381 gold badge23 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gokul Chandrasekaran · Accepted Answer · 2018-03-05 06:02:58Z

0

You could create a state in your app state that contains the selected item to be edited. The editor component cab be subscribed to that state. When you click Editar button it triggers an action EDIT_ITEM which will populate the redux state with the item to edited.

Clicking the Ok button will update the redux state for the items.

// State 
    const state = {
    items: [],
    selected: {}
}

    //Actions
    const EDIT_ITEM = 'edit'
    const UPDATE_ITEM = 'edit'
    //Reducers
    const reducer = (state, action) {
        switch({action, data})  {
            EDIT_ITEM: 
                return Object.assign({}, state, data)
            SAVE_ITEM: 
                //save based on id
        }
}

answered Mar 5, 2018 at 6:02

Gokul Chandrasekaran

5453 silver badges10 bronze badges

2 Comments

javier cruz Over a year ago

Thanks, I added a reducer to handle selected items as you mentioned. I have this working now.

Gokul Chandrasekaran Over a year ago

Glad it worked for you. It would help others as well if you could mark this as the correct answer. Thanks.

Collectives™ on Stack Overflow

How to send data between components redux/react

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related