CODEWITHSUNDEEP
reactjsredux
Ajay Gupta
Ajay Gupta

Reputation: 2033

React doesn't update the view even when Redux state is changed

The problem is when I update state in Redux, React doesn't run the render function. I am a beginner in Redux so I am not getting what exactly should I be doing to solve this. I read about the @connect function but as I am using CreateReactApp CLI tool, I won't be able to provide support for Decorators without ejecting (Which I dont want to do).

Component:

import React from "react";
import Store from "../store";

Store.subscribe(() => {
  console.log(Store.getState().Auth);
});

export default class Login extends React.Component {
  login = () => {
    Store.dispatch({ type: "AUTH_LOGIN" });
    // this.forceUpdate(); If I forceUpdate the view, then it works fine
  };
  logout = () => {
    Store.dispatch({ type: "AUTH_LOGOUT" });
    // this.forceUpdate(); If I forceUpdate the view, then it works fine
  };
  render() {
    if (Store.getState().Auth.isLoggedIn) {
      return <button onClick={this.logout}>Logout</button>;
    } else {
      return <button onClick={this.login}>Login</button>;
    }
  }
}

Reducer:

export default AuthReducer = (
  state = {
    isLoggedIn: false
  },
  action
) => {
  switch (action.type) {
    case "AUTH_LOGIN": {
      return { ...state, isLoggedIn: true };
    }
    case "AUTH_LOGOUT": {
      return { ...state, isLoggedIn: false };
    }
  }
  return state;
};

Can anyone please point me in the right direction? Thanks

Upvotes: 2

Views: 62

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281626

You can make use of connect HOC instead of decorator, it would be implemented like

import { Provider, connect } from 'react-redux';
import Store from "../store";

class App extends React.Component {
    render() {
       <Provider store={store}>
          {/* Your routes here */}
       </Provider> 
   }
}


import React from "react";
//action creator
const authLogin = () => {
    return { type: "AUTH_LOGIN" }
}

const authLogout = () => {
    return { type: "AUTH_LOGOUT" }
}

class Login extends React.Component {
  login = () => {
     this.props.authLogin();
  };
  logout = () => {
    this.props.authLogout();
  };
  render() {
    if (this.props.Auth.isLoggedIn) {
      return <button onClick={this.logout}>Logout</button>;
    } else {
      return <button onClick={this.login}>Login</button>;
    }
  }
}

const mapStateToProps(state) {
   return {
      Auth: state.Auth
   }
}

export default connect(mapStateToProps, {authLogin, authLogout})(Login);

Upvotes: 1

Related Questions