0

Hello everyone im new using redux in my react-native app. well I saved a bad information within my InitialState of the nav so when I try to reload the application in the android emulator I get this error

Invariant Vilation: There is no route defined for key User. Must be one of: 'Main', 'Welcome'

enter image description here

The error happened because in this method

actions/user.js

export function loginWithFacebook(facebookAccessToken) {
return (dispatch) => {
return fetch(`${HOST}/api/v1/facebook`, {
  method: 'POST',
  body: JSON.stringify({
    facebook_access_token: facebookAccessToken,
  }),
  headers: { "content-type": "application/json" },
})
.then(response => response.json())
.then(json => {
  console.log(json);

  if (json.access_token) {
    dispatch(setAccessToken(json.access_token));
    dispatch(setProfile(normalizeProfile(json.email, json.fullname, json.image)));
    dispatch(resetRoute({ routeName: 'Welcome' }));
  } else {
    alert(json.error);
  }
})
.catch(e => alert(e)); }; }

The error happened in this line

dispatch(resetRoute({ routeName: 'Welcome' }));

I Wrote "Home" instead "Welcome"

and the value Home was added to my initialState nav instead Welcome value

actions/nav.js

export function resetRoute(route) {
return (dispatch, getState) => {
const nav = getState().nav;
dispatch(NavigationActions.reset({
  index: 0,
  key: null,
  actions: [
    NavigationActions.navigate(route)
  ]
})); }; }

Reducers

index.js

export default combineReducers({
nav,
user });

nav.js

const initialState =        AppNavigator.router.getStateForAction(NavigationActions.reset({
index: 0,
actions: [
  NavigationActions.navigate({
    routeName: 'Main',
  }),
], }));

export default function(state = initialState, action) {
  //state = undefined;
  const nextState = AppNavigator.router.getStateForAction(action,    state);
  return nextState || state;
};

above method throws the exceptions because when it calls AppNavigator.router.getStateForAction(action, state); it gets "Home" instead "Welcome" so basically I need to restart the initialState to the beginning

How can I set null all my initialState reducers MANUALLY? remember I can not see a screen in my android emulator so I can not fire actions with buttons or something similar.

I found this article: How to reset the state of a Redux store? but in my case I can not see the screen to fire the Logout action.

The solution I think is to set null or empty my initialState value of my reducers to can start from the beginning. but how can I do it?

Alien Java
  • 75
  • 2
  • 12

1 Answers1

0

So your main problem is that you want to reset the state of the store, but you cannot even access the first screen, so you cannot dispatch an action in a screen to reset it, am I right?

What you may be able to do, together with the other stackoverflow answer that you linked: How to reset the state of a Redux store?, you may be able to reset the state before a screen is rendered.

If you have your reducers as it's mentioned there, you can dispatch an action before a screen is rendered. For example, in the index of your application. You may want to do it in the index file, for example.

You can achieve this by not using react-redux but dispatching an action directly to the store by using the dispatch method.

Something like store.dispatch(<Reseting action goes here>) in your index file, before you actually render any screen.

Hope it helps! Let me know if you find any more problems or if it's not clear enough. Cheers!

Federico Ojeda
  • 758
  • 7
  • 11