CODEWITHSUNDEEP
javascriptreactjsreduxjsx
davidesp
davidesp

Reputation: 3962

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

I have the following Codesandbox.io:

https://codesandbox.io/s/qxkq5vvm1q

which is a basic ReactJS / Redux application.

The key components here are:

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!

Upvotes: 0

Views: 56

Answers (1)

Varinder
Varinder

Reputation: 2664

Updater component is producing new list of themes every 3seconds

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

Upvotes: 2

Related Questions