export default function GetInfoBox({title, text, buttonText}) {
return (
<div className='infoBox' style={{background: `url(img.svg)`, backgroundSize: '100% 100%', width: '200px', height: '200px'}}>
<div className="title">{title}</div>
<div className="text">{text}
<button>{buttonText}</button>
</div>
</div>
)
}<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version = "1.1"
baseProfile="full"
xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"
xmlns:ev = "http://www.w3.org/2001/xml-events"
width='100%' height='100%'>
<path d="M50 50 L100 100 L700 100 L700 50 Z" fill="red" />
</svg>разумеется это сугубо моя точка зрения
Invalid value of type object for mapStateToProps argument when connecting component App
store.dispatch({type: 'INCREMENT', payload: 123}) {title: undefined, body: "Body"}
Counter.js:49 {title: undefined, body: "Body"}
Counter.js:49 {title: undefined, body: "Body 2"}
Counter.js:49 {title: undefined, body: "Body"}
webpackHotDevClient.js:138 ./src/App.js
Line 5:18: 'useDispatch' is defined but never used no-unused-vars
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
App.js:15 Add Track
Counter.js:49 {title: 123, body: "Body"}
App.js:22 Remove Track
Counter.js:49 {title: 321, body: "Body 2"}
import React, {Component} from 'react';
import logo from './logo.svg';
import {Counter, store} from './features/counter/Counter';
import './App.css';
import {connect, useDispatch} from "react-redux";
store.dispatch({ type: 'INCREMENT' });
class App extends Component {
addTrack () {
console.log('Add Track');
this.props.changeState(store.dispatch({type: 'INCREMENT', payload: 123}));
};
removeTrack() {
console.log('Remove Track');
this.props.changeState(store.dispatch({type: 'DECREMENT', payload: 321}));
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Counter />
<p onClick={this.addTrack.bind(this)}>
Edit <code>src/App.js</code> and save to reload.
</p>
<span>
<span onClick={this.removeTrack.bind(this)}>Learn {store.getState().title}</span>
<a
className="App-link"
href="https://reactjs.org/"
target="_blank"
rel="noopener noreferrer"
>
React
</a>
<span>, </span>
<a
className="App-link"
href="https://redux.js.org/"
target="_blank"
rel="noopener noreferrer"
>
Redux
</a>
<span>, </span>
<a
className="App-link"
href="https://redux-toolkit.js.org/"
target="_blank"
rel="noopener noreferrer"
>
Redux Toolkit
</a>
,<span> and </span>
<a
className="App-link"
href="https://react-redux.js.org/"
target="_blank"
rel="noopener noreferrer"
>
React Redux
</a>
</span>
</header>
</div>
);
}
}
const changeState = data => data;
const mapDispatchToProps = { changeState };
export default connect(null, mapDispatchToProps)(App);