Как мы используем Redux с React-Router или мы должны использовать Redux-Router-First-Link? - PullRequest
0 голосов
/ 29 декабря 2018

у меня есть мои компоненты

Регистрация

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 или интегрироваться с реагировать-маршрутизатором и резервом?

Я хочу перейти к компоненту регистрациииз основного компонента и рендера значение счетчика должно быть увеличено кнопкой, и это же значение должно быть отражено и в компоненте входа в систему (где я хочу уменьшить значение счетчика, и это должно снова отразиться при регистрации)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...