CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-reduxreact-router-v4
jadlmir
jadlmir

Reputation: 505

how to use react - router in redux

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

the above is the login page i have a function is login that takes the param and push it to the action in the 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");
        }
    };
};

i want to use this.props.history.push() but it doesnt work neither in the reducer neither in action how should i need to do this job

Upvotes: 0

Views: 236

Answers (2)

soupette
soupette

Reputation: 1280

You can export the history in from your app.js file:

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

Then in your action you can create a function like the following:

import { history } from 'app';

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

Upvotes: 1

Talgat Saribayev
Talgat Saribayev

Reputation: 1938

In my opinion you have two options. Either return some flag from redux store to Component and then redirect. Or use react-router-redux

Upvotes: 0

Related Questions