append div on a component when an event handler is fired from another one whithreact and reduce

Question

Hi i'm working on a drag and drop app with react and redux and i want to append a div inside a container when an event hander (ondragstart) is fired from a component.

the draagged component is made as follow :

import React, {Component} from 'react'

import {classify} from '../functions/functions'

export default class Actions extends Component {
    constructor(props){
        super(props)
        this.state={opacity : 1};
        this.dragstart = this.dragstart.bind(this)
        this.dragend = this.dragend.bind(this)
    }
    dragstart(e){
            this.setState({opacity : .4});
            let id = e.target.id;
    }
    dragend(){
        this.setState({opacity : 1});
    }
    render(){

        let name = classify(this.props.name);
        return  <div className={this.props.class} draggable='true' onDragStart={this.dragstart} onDragEnd={this.dragend} style={this.state}>
                    <img className="default actions-icon" src={'./icons/'+name+'/'+name+'-.svg'}/>
                    <span className="default">{name}</span>
                </div>
    }
}

the component i want to append an element on :

import React, {Component} from 'react'

import Action from './actions'

class Activity extends component{

    render(){
        const initialState = {
            drag: 'Off'
          }
        let Actions = this.props.tasks.map((task)=> <Action key={task.name} name={task.name} class='default1 activity'/>)
        return  <div id={this.props.id} className='default1 phase' >
                    {Actions}
                </div>
    }
}

export default Activity

wich will become a child of this component :

import React, {Component} from 'react'

import Action from './actions'
//import Activity from './activity'

import {actions} from '../variables/variables'

export default class Actionsbar extends Component {
    render(){
        return <div id='process-display' className='default'>
                    <div id='pase-0' className='default1 phase'>
                        <Action key='debut' name='debut' class='default1 activity'/>
                    </div>
                    <div id='pase-1' className='default1 phase'>
                    </div>
                </div>

    }
}

i'm new with react and reduce and i can't get the idea of storing state on the store and connect it with the component.

thanks in advance.

Answer 1

It feels weird to store UI state in redux's store. UI State of the component should be stored in your component's state, and passed to children within props.

If components are too far away in the component's hierarchy yeah you can use redux, but think twice before doing that since the complexity of the code increases.