Use Redux to pass value from child to parent?

Question

JavaScript

I didn't really understand Redux yet. But the task is to transfer the value from the child to the parent.
I used to use Reflux for this.
How to do it in Redux. I read too many troubles about him for such a small task, maybe I'm wrong?

const FilterItem = React.createClass({

  mixins: [
    OnClickOutside
  ],

  handleClickOutside: function(evt) {
    this.setState({modalIsOpen: false});
  },

  getInitialState() {
    return {
      modalIsOpen: false
    };
  },

  closeModal() {
    this.setState({
      modalIsOpen: false
    });
    this.forceUpdate()
  },

  render() {

    let categories = (this.props.type == 'categories') ?
      <div className={classNames('popups', {'active': this.state.modalIsOpen})} ><FilterPopup onClick={this.closeModal} /></div> : '';

    return (
      <li className="filter-result-item" onClick={this.showPopup}>
        {img}
        {categories}
      </li>
    );
  }
});

And the popup itself

const FilterPopup = React.createClass({
  filterPopup(){},
  selectAll(){},
  render() {

    return (
        <div className="filter-popup" onClick={this.props.onClick}>
          <div className="filter-popup-header">
            <div className="filter-popup-select-all checkbox"  onClick={this.selectAll}>
              <input type="checkbox" id="test" name="test1"/>
              <label htmlFor="test1"><span></span><i>Select All</i></label>
            </div>
          </div>

          <div className="filter-popup-body">
            <div className="filter-popup-select checkbox">
              <input type="checkbox" id="test1" name="test1"/>
              <label htmlFor="test1"><span></span><i>Speaker</i></label>
            </div>
            <div className="filter-popup-select checkbox">
              <input type="checkbox" id="test1" name="test1"/>
              <label htmlFor="test1"><span></span><i>Organizer</i></label>
            </div>
            <div className="filter-popup-select checkbox">
              <input type="checkbox" id="test1" name="test1"/>
              <label htmlFor="test1"><span></span><i>Sponsor</i></label>
            </div>
            <div className="filter-popup-select checkbox">
              <input type="checkbox" id="test1" name="test1"/>
              <label htmlFor="test1"><span></span><i>Atendee</i></label>
            </div>
          </div>

          <div className="filter-popup-footer">
            <div className="filter-popup-reject" onClick={this.props.onClick}><i className="fa fa-times"></i></div>
            <div className="filter-popup-confirm"  onClick={this.props.onClick}><i className="fa fa-check"></i></div>
          </div>
        </div>
    );
  }

});

Answer 1

What's the problem with passing the parent's function to the child's parameter?

{
setValue: function(value){
  this.setState({someValue:value})
},
render:function(){
    <Child  setValueToParent={this.setValue} />
}
}

or maybe i misunderstood something

Answer 2

Unless you have some specific case - redux all (well, almost all) state is stored in the repository, so this problem does not arise in principle.
Show code.
Most likely, the point is that you have a click handler on a child / parent element and when it executes:

<div className="filter-popup" onClick={this.props.onClick}>
....
closeModal() {
    this.setState({
      modalIsOpen: false
    });
    this.forceUpdate()
  },

That event (click) pops up, which in turn leads to the execution of:

<li className="filter-result-item" onClick={this.showPopup}>
...
showPopup() { ... }

It turns out that the popup is hidden and immediately shown again. If you do not find fault with how it is implemented at all (etc.) - you need to do this https://developer.mozilla.org/ru/docs/Web/API/Even...

closeModal(e) {
    e.stopPropagation();
    this.setState({
      modalIsOpen: false
    });
  },

Here is a working example jsfiddle.net/yuvuyrhv/26