change state in component with redux

Question

I'm using reactjs with redux for state management. I want to change state in a component with redux. but when I send props to the component and I inspect it with console.log(), returned undefined to me. please guide me to solve problem... thanks

Svg Viewer Component

import React, { useEffect, useState, useContext } from "react";
import * as d3 from "d3";
import store from "../../redux/store";

    const SvgViewer = ({ nodesData, svgFilePath, props }) => {
      //const { visible, invisible } = props;

      const [svgContainer, setSvgContainer] = useState(undefined);

      const showNodesOnSvg = nodes => {


        let svgDoc = svgContainer.contentDocument;
        let gTags = svgDoc.querySelectorAll("svg > g");
        let container = null;
        if (gTags.length > 1) container = svgDoc.querySelector("g:nth-of-type(2)");
        else container = svgDoc.querySelector("g:nth-of-type(1)");
        let node = d3.select(container);
        nodesData.forEach(nodeData => {
          node
            .append("text")
            .attr("id", "node" + nodeData["id"])
            .attr("fill", "white")
            .attr("text-anchor", "middle")
            .attr("x", nodeData["positionX"])
            .attr("y", nodeData["positionY"])
            .attr("class", "clickable-node")
            .style("font-size", "8px")
            .style("position", "absolute")
            .style("cursor", "pointer")
            .style("display", "inline-block")
            .on("click", function() {
              clickHandler(nodeData["id"]);
            })

            .text("N/A" + " " + nodeData["symbol"]);
          let nodeCreated = d3.select(
            svgDoc.getElementById("node" + nodeData["id"])
          );
          nodeCreated
            .append("title")
            .attr("id", "title" + nodeData["id"])
            .text(" " + nodeData["tagCode"]);
        });
      };
      const clickHandler = nodeID => {
        console.log(props); //not show props
      };
      useEffect(() => {
        const svg = document.querySelector("#svgobject");
        setSvgContainer(svg);
        svg.onload = () => {
          if (nodesData != null) {
            showNodesOnSvg();
          }
        };
      });

      return (
        <div className="unit-schema-container1" key={svgFilePath}>
          {/* <Spin indicator={objectLoading} spinning={this.state.objectLoading}> */}
          <object id="svgobject" type="image/svg+xml" data={svgFilePath}></object>
          {/* </Spin> */}
        </div>
      );
    };

    export default SvgViewer;

store

import { createStore, combineReducers } from "redux";
import modalReducer from "./reducers/modalReducer";

const store = createStore(modalReducer);

export default store;

Reducer:

function modalReducer(state = initialState, action) {
const initialState = false;
  switch (action.type) {
    case "VISIBALE":
      return (state = true);
    case "INVISIBALE":
      return (state = false);
    default:
      return state;
  }
}

export default modalReducer;

Action

export function visible() {
  return {
    type: "VISIBLE"
  };
}

export function invisible() {
  return {
    type: "INVISIBLE"
  };
}

Svg Container

import { visible, invisible } from "../redux/actions/modalAction";
import { connect } from "react-redux";
import svgViewer from "../pages/unit-monitor/svg-viewer";

const mapStateToProps = state => ({
  visibale: state.value
});

const mapDispatchToProps = dispatch => {
  return {
    visible: () => dispatch(visible()),
    invisible: () => dispatch(invisible())
  };
};

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

Svg Component

import React, { PureComponent } from "react";
import { Row, Col, Spin, Icon } from "antd";
import axios from "axios";
import "./tree-select.scss";
import History from "./history";
import SchemaTreeSelect from "./schema-tree-select";
import SvgViewer from "../../container/svgViewerContainer";


class UnitMonitor extends PureComponent {
  constructor() {
    super();
  }
  state = {
    nodes: undefined,
    nodeId: 25,
    valueSignalR: [],
    searchText: "",
    selectedChart: "Line",
    tsSchemaLoading: false,
    objectLoading: false,
    svgFilePath: ""
  };

  onChangeShcema = schemaID => {
    axios.get("/api/schemata/get-schemata-nodes/" + schemaID).then(response => {
      this.setState({ nodes: response.data });
      let path = response.data[0].file;
      let svgFile = require("./images/" + path);
      this.setState({ svgFilePath: svgFile });
    });
  };


  render() {
    return (
      <Row type="flex" className="">
        <Col span={25}>
          <SchemaTreeSelect handleChange={this.onChangeShcema} />
          <History nodeId={this.state.nodeId} />
          <SvgViewer
            svgFilePath={this.state.svgFilePath}
            nodesData={this.state.nodes}
          />
        </Col>
      </Row>
    );
  }
}

export default UnitMonitor;

Your action reads INVISIBLE and reducer reads UNVISIBALE, same with the other one — Agney
In mapStateToProps you have state.value which is undefined, no value property — gadi tzkhori

code it up code it up · Accepted Answer · 2020-01-05T10:43:28

You are trying to read the value property on state, but there is no such property on the state returned by your reducer... it is just true or false so replace the state.value with the state itself in your mapStateToProps.

const mapStateToProps = state => ({
  visibale: state
});

Also there is an inconsistency between your types used for dispatching the actions on the redux state.

"VISIBALE"/ "UNVISIBALE" is used in reducer while "VISIBLE"/ "INVISIBLE" is used in action dispatcher.`

change state in component with redux

1 Answers