Conditional rendering when using Redux (pure component and non-pure component)?

Question

const LoginPage = ({ auth, doLogin, doLogout }) => (


    <div>
      <NavBar auth={auth}/>
        <div className="row">
            <div style={{display: 'flex', justifyContent: 'center'}} className="col-md-4 col-md-offset-4">
                <LoginForm auth={auth} doLogin={doLogin} doLogout={doLogout}/>
            </div>
        </div>
      </div>

);

// Connects state to the props of this component
const mapStateToProps = state => ({
  auth: state.auth,
});

// Return a NEW component that is connected to the Store
export default connect(mapStateToProps, { doLogin, doLogout })(LoginPage);

Above is the code of the component called LoginPage. It passes in the global state auth and two actions doLogin and doLogout. The LoginForm handles the user authentication, but I want to put another component called Dashboad and render it conditionally based on the auth's status.

However, I am not sure how to conditionally render in a pure component.

I could change into a non-pure component, but then I am not sure how to pass in auth, doLogin, and doLogout into a non-pure component.

Please help.

Rohith Murali · Accepted Answer · 2018-07-06 03:15:20Z

1

You can do almost everything you did in a non pure component in a pure component, except that PureComponent automatically does the shouldComponentUpdate by react itself to avoid unnecessary rerenders based on the shallow diffing of state and props.

If you want to conditionally render dashboard you can check the auth status from redux and use this.props.history.push("/dashboard") or <Redirect to="/dashboard"> to navigate to Dashboard component

answered Jul 6, 2018 at 3:15

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dawn17 Over a year ago

Then how can I do conditional rendering in my example above?

Rohith Murali Over a year ago

You should change the above component from a functional component to a Component or a PureComponent and inside the comonentDidMount or componentWillReceiveProps, you can check thee authStatus, and use the history or redirect to navigate to dashboard

Collectives™ on Stack Overflow

Conditional rendering when using Redux (pure component and non-pure component)?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related