Question

我有我的组件

注册

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
  };
};

但是我遇到了这些错误：

上述错误发生在组件中：未捕获的TypeError：_selectLocationState不是函数

如何将此React-Router与Redux集成在一起？我认为>将react-router与redux连接出现错误。

我应该使用React-router-redux还是与react-router和redux集成？

我想从主组件导航到注册组件，并使用按钮将计数器的值渲染为递增，并且登录组件中也应反映相同的值（我想在其中递减计数器值，并且该值应再次反映在注册）

我们如何将redux与react-router一起使用，还是应该使用redux-router-first-link？

0 个答案: