CODEWITHSUNDEEP
react-nativereact-reduxreact-navigation
Warren
Warren

Reputation: 755

React Navigation proper way to reset stack using Redux

What is the correct way to get back (reset) to an initial state using React-Navigtion and Redux.

This is my initial state:

const firstAction = AppNavigator.router.getActionForPathAndParams('HomeDrawer');
const tempNavState = AppNavigator.router.getStateForAction(firstAction);
const secondAction = AppNavigator.router.getActionForPathAndParams('Login');
const INITIAL_STATE = AppNavigator.router.getStateForAction( secondAction, tempNavState );

This is my reducer:

export default (state = INITIAL_STATE, action) => {
  let nextState;
  switch (action.type) {
    case 'LOGIN':
      nextState = AppNavigator.router.getStateForAction(NavigationActions.back()), state);
      break;
    case 'LOGOUT_TEMP':
      nextState = AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);
      break;
    case 'LOGOUT_START':
      // Don't know exactly what to do here
      nextState = { ...INITIAL_STATE };
      break;
    default:
      nextState = AppNavigator.router.getStateForAction(action, state);
    break;
  }
  return nextState || { ...state };
};

I am not sure if this will work. I don't understand how React-Navigation deals with this behind the scenes. Does it listen to this type of state change and navigate appropriately or do I need to always run actions through getStateForAction(NavigationActions.something(...), state) ? 

nextState = { ...INITIAL_STATE };

I have done this before when I was not using Redux:

const resetLogin = NavigationActions.reset({
  index: 1,
  actions: [
      NavigationActions.navigate({ routeName: "HomeDrawer" }),
      NavigationActions.navigate({ routeName: "Login" })
    ]
});

Do I do the following with the above ?

nextState = AppNavigator.router.getStateForAction(resetLogin, state);

How do I reset React-Navigation back to the Redux initial state and can I use the const INITIAL_STATE above to do this somehow ?

Thanks,

Warren Bell

Upvotes: 3

Views: 1320

Answers (1)

Warren
Warren

Reputation: 755

Wow, no answers. For the record I ended up using:

const resetLogin = NavigationActions.reset({
  index: 1,
  actions: [
    NavigationActions.navigate({ routeName: "HomeDrawer" }),
    NavigationActions.navigate({ routeName: "Login" })
  ]
});

and then doing this in my reducer:

nextState = AppNavigator.router.getStateForAction(resetLogin, state)

I also discovered that using:

AppNavigator.router.getActionForPathAndParams('ScreenName');

does not get me the correct redux action if 'ScreenName' is a screen in a DrawerNavigator. Using the following gets me the correct redux action:

NavigationActions.navigate({ routeName: 'ScreenName' })

Hope this helps someone else.

Thanks,

Warren Bell

Upvotes: 3

Related Questions