Cannot update the app state from custom component using React and Redux

Question

I have the following Codesandbox.io :

https://codesandbox.io/s/qxkq5vvm1q

which is a basic ReactJS / Redux application.

The key components here are:

• a Select which gets its values something like through this way: Redux (state manager) -> PanelMaterialSize (container) -> Select

• one Updater component which takes care of update the values available on the Select through Redux

• Alert button, which when clicked should alert the value stored on the store

What should happen is:

1. when the user changes an option on the Select , that value should be stored on the store. This is actually happening properly - OK

2. if the Select gets its values changed (for example because the Updater component), then it should automatically change the value stored on the store with the value it is showing (something similar as if the user changes the value on it). Unfortunately this is not happening - The Goal

Here are some of the codes:

./src/controls/Select/Select.js

import React, { Component } from "react";
import "./Select.scss";

class Select extends Component {
  constructor(props) {
    super(props);
    let { name, data, className, ...controlProps } = this.props;
    this.name = name;
    this.data = data;
    this.controlProps = controlProps;
    this.state = {
      [name]: data,
      className
    };
  }

  render() {
    let data = this.state[this.name];
    return (
      <div className="control-select" {...this.controlProps}>
        <div className="custom-dropdown custom-dropdown--grey">
          <select className="custom-dropdown__select custom-dropdown__select--grey">
            {this.props.data.length > 0 &&
              this.props.data.map((elem, index) => {
                return (
                  <option value={elem.value} key={index}>
                    {elem.text}
                  </option>
                );
              })}
          </select>
        </div>
      </div>
    );
  }
}

export default Select;

src/controls/PanelMaterialSize/PanelMaterialSize.js

import React, { Component } from "react";
import { connect } from "react-redux";
import "./PanelMaterialSize.scss";
import Select from "../Select/Select";
import { setThemeList, setSelectedTheme } from "../../store/AppConfig/actions";

class PanelMaterialSize extends Component {

  constructor(props) {
    super(props);
    this.state = {
      selection: "",
      options: []
    };
  }

  handleChange = e => {
        let target = e.target;
    let value = target.value;
        this.props.setSelectedTheme(value);
  };

  render() {
    return (
      <div className="partial-designer-panel-material-size">
        <div>
          <div className="label-input">
            <div className="label">THEME</div>
            <div className="input">
              <Select
              name="selection"
              value={this.state.selection}
              data={this.props.themeList}
              style={{ width: "100%" }}
              onChange={this.handleChange}
             />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = appState => {
  return {
    themeList: appState.appConfig.themeList,
    selectedTheme: appState.appConfig.selectedTheme,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setThemeList: themeList => dispatch(setThemeList(themeList)),
    setSelectedTheme: selectedTheme => dispatch(setSelectedTheme(selectedTheme)),
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PanelMaterialSize);

Any idea on how to make the point 2 work?

If possible, please, provide back your solution on a forked Codesandbox.io .

Thanks!

Answer 1

Updater component is producing new list of themes every 3seconds

It must also dispatch setSelectedTheme action to update selected theme in application state