如何在 redux 中使用 react-router

Question

import React, { Component } from "react";
import { connect } from "react-redux";   
import { Link } from "react-router-dom";
import { userChange, passwordChanged, islogin } from "./actions";

class Login extends Component {
    constructor(props) {
        super(props);
        this.login = this.login.bind(this);
        this.handleUserChange = this.handleUserChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
    }
    handlePasswordChange(text) {
        this.props.passwordChanged(text.target.value);
    }
    handleUserChange(text) {
        this.props.userChange(text.target.value);
    }
    login() {
        const { username, password } = this.props;
        this.props.islogin({ username, password });
    }
    componentWillUpdate() {}


render (){
return (.........)}
    }
    const mapStateToProps = ({ authRed }) => {
        const { username, password, navigate } = authRed;
        return { username, password, navigate };
    };
    export default connect(mapStateToProps, {
        userChange,
        passwordChanged,
        islogin
    })(Login);

上面是登录页面我有一个功能是登录，它接受参数并将其推送到操作在 action.js

export const userChange = text => {
    return {
        type: "USER_CHANGED",
        payload: text
    };
};
export const passwordChanged = text => {
    return {
        type: "PASSWORD_CHANGED",
        payload: text
    };
};
export const islogin = ({ username, password }) => {
    return dispatch => {
        if (username !== "" && password !== "") {
            localStorage.setItem("Loggedin", true);
            dispatch({ type: "NAVIGATE" });
        } else {
            console.log("is empty");
        }
    };
};

我想使用 this.props.history.push() 但它在减速器中既不工作也不在行动我应该如何完成这项工作

Answer 1

在我看来，您有两种选择。 return 从 redux store 到 Component 的一些标志，然后重定向。或者使用 react-router-redux

Answer 2

您可以从 app.js 文件中导出历史记录：

// Create redux store with history
const initialState = {};
const history = createHistory();
const store = configureStore(initialState, history);
export { history };

然后在您的操作中，您可以创建如下函数：

import { history } from 'app';

function forwardTo(location) {
  history.push(location);     
}

如何在 redux 中使用 react-router

how to use react - router in redux

javascript

reactjs

react-router

react-redux

react-router-v4