у меня есть мои компоненты
Регистрация
import React, { Component } from "react";
import { connect } from "react-redux";
import * as actionCreators from "./Store/Actions/Actions";
import { withRouter } from "react-router-dom";
class Signup extends Component {
render() {
console.log("signup is mounted");
return (
<div>
<header>Signup component</header>
<button onClick={this.props.onIncrementCounter}>Increment</button> */}
<div value={this.props.ctr}>counter:</div>
</div>
);
}
}
const mapStateToProps = state => {
return {
ctr: state.counter
};
};
const mapDispatchToProps = dispatch => {
return {
onIncrementCounter: () => dispatch(actionCreators.increment()),
onDecrementCounter: () => dispatch(actionCreators.decrement()),
onResetCounter: () => dispatch(actionCreators.reset())
};
};
export default withRouter(
connect(
mapStateToProps,
mapDispatchToProps
)(Signup)
);
и основной
import React, { Component } from "react";
import Link from "redux-first-router-link";
import Dashboard from "./Dashboard";
import Signup from "./Signup";
import Login from "./Login";
class Main extends Component {
render() {
console.log("main component");
return (
<div>
<header>
<Link to="/users/signup">
<button>Signup</button>
</Link>
<Link to="/users/login">Login</Link>
<Link to="/dashboard">Dashboard</Link>
Main component
</header>
</div>
);
}
}
export default Main;
и мой компонент приложения
import React, { Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import { Provider } from "react-redux";
import Signup from "./Signup";
import Login from "./Login";
import Main from "./Main";
const App = ({ store }) => (
<Provider store={store}>
<Router>
<div>
<Route path="/" component={Main} />
<Route path="/users/login" component={Login} />
<Route path="/users/signup" component={Signup} />
</div>
</Router>
</Provider>
);
export default App;
и индексный файл
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import Reducer from "./Store/Reducers/reducer";
import { createStore } from "redux";
import { Provider } from "react-redux";
const store = createStore(Reducer);
// ReactDOM.render(<App store={store} />, document.getElementById("root"));
ReactDOM.render(
<App store={store} />,
document.getElementById("root")
);
serviceWorker.unregister();
и редуктор
import * as actionTypes from "../Actions/ActionTypes";
const initialState = {
counter: 0
};
export const Reducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.INCREMENT:
return {
...state,
counter: state.counter + 1
};
case actionTypes.RESET:
return {
...state,
counter: state.counter
};
case actionTypes.DECREMENT:
return {
...state,
counter: state.counter - 1
};
}
};
export default Reducer;
и файл действий
import * as actionTypes from "./ActionTypes";
export const increment = () => {
return {
type: actionTypes.INCREMENT
};
};
export const decrement = () => {
return {
type: actionTypes.DECREMENT
};
};
export const reset = () => {
console.log(actionTypes.RESET);
return {
type: actionTypes.RESET
};
};
, но я получаю следующие ошибки:
ВышеПроизошла ошибка в компоненте: Uncaught TypeError: _selectLocationState не является функцией
как мне интегрировать этот реагирующий маршрутизатор с избыточным?Я думаю,> есть ошибка при подключении реакции-маршрутизатора с резервом.
Должен ли я использовать React-router-redux или интегрироваться с реагировать-маршрутизатором и резервом?
Я хочу перейти к компоненту регистрациииз основного компонента и рендера значение счетчика должно быть увеличено кнопкой, и это же значение должно быть отражено и в компоненте входа в систему (где я хочу уменьшить значение счетчика, и это должно снова отразиться при регистрации)