change state in component with redux - reactjs

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;

Answer 1

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.`