0

I am building a react native application but I noticed that componentWillReceiveProps is not getting called as soon as I dispatch some actions to the redux store, it only gets called when I refresh the screen.

Component

import React from 'react';
import { connect } from 'react-redux';
import { renderLogin } from '../../components/Auth/Login';

class HomeScreen extends React.Component {

  componentWillReceiveProps(props) {
    const { navigate } = props.navigation;
    if (props.userData.authenticated) {
       navigate('dashboard')
    }
  }

  login = () => {
      renderLogin()
  }
  render() {
      const { navigate } = this.props.navigation;
        return (
          <Container style={styles.home}>
            // Some data
        </container>
        )
      }
   }

function mapStateToProps(state) {
     return {
        userData: state.auth
     }
  }

export default connect(mapStateToProps)(HomeScreen)

RenderLogin

    export function renderLogin() {
      auth0
        .webAuth
        .authorize({
          scope: 'openid email profile',
          audience: 'https://siteurl.auth0.com/userinfo'
        })
        .then(function (credentials) {
          loginAction(credentials)
        }
        )
        .catch(error => console.log(error))
    }

loginAction

    const store = configureStore();


    export function loginAction(credentials) {
      const decoded = decode(credentials.idToken);
      saveItem('token', credentials.idToken)
      store.dispatch(setCurrentUser(decoded));
    }

    export async function saveItem(item, selectedValue) {
      try {
        await AsyncStorage.setItem(item, JSON.stringify(selectedValue));
        const decoded = decode(selectedValue);
      } catch (error) {
        console.error('AsyncStorage error: ' + error.message);
      }
    }
rasaq ganiu
  • 43
  • 6
  • How do you dispatch actions? – Huy Vo Apr 09 '18 at 10:42
  • @HuyVo I have modified the code. – rasaq ganiu Apr 09 '18 at 10:47
  • I mean how do you dispatch your action in `HomeScreen`? I didn't see any code where you dispatching. – Huy Vo Apr 09 '18 at 10:49
  • @HuyVo IIf you look through my code I have a login method, when a user is authenticated. a token will be returned which I stored in AsynStorage then dispatch the actions. I can verify that the redux store gets updated but componentWillReceiveProps is not getting called inside the HomeSCreen component. – rasaq ganiu Apr 09 '18 at 10:54
  • There're a lot of missing code, for example where do you use `getToken` in the code above? What is the code of `renderLogin`? Provide the full context and maybe we can help. Also adding redudant imports (Container, Text, Button,..) is kinda distracting you know. – Huy Vo Apr 09 '18 at 11:14
  • @HuyVo Thanks for your response, I have updated the code. – rasaq ganiu Apr 09 '18 at 11:30

1 Answers1

0

I believe your problem has something to do with mapStateToProps, i.e. when you have updated your state in redux but not yet map the new state to your props, therefore props in HomeScreen will remain unchanged and componentWillReceiveProps will only be triggered once.

Have a read on Proper use of react-redux connect and Understanding React-Redux and mapStateToProps.

Huy Vo
  • 2,418
  • 6
  • 22
  • 43