react-navigation + redux about ignite-andross HOT 22 CLOSED

I was following this boilerplate to integrate react-navigation with redux but came across this error with immutable and reduxpersist

The push method cannot be invoked on an Immutable data structure

I've worked around it so far by blacklisting the nav reducer from reduxpersist.

from ignite-andross.

@HelloEdit Redux + react-navigation integration for ignite-ir-boilerplate is in progress.

If you would like a sneak preview of an example app that shows how an Ignited app works with react-navigation + redux in a way that wires up the Redux aspect of react-navigation integration with Sagas that dispatch Redux actions for Rehydration complete, Login and Logout actions, you might want to take a look at https://github.com/infinitered/ignite-example-login. This example app shows how to use react-navigation + redux to switch between StackNavigators via getStateForAction(reset({})) so the navigation stack is reset when the navigator loads a new StackNavigator that has the screens that are appropriate for an unauthenticated user or an authenticated user.

I'm currently working on the README.md to provide a walkthrough of the code that explains how it all works, but you can review the code to get some ideas of how you might set up your own Ignited app to integrate Redux with react-navigation.

from ignite-andross.

@tmaly1980 - I feel your pain. I have the exact same scenario in a project I'm working on, where I need to dispatch a reset navigation action from a container. I agree that the amount of code required to do something that seems simple, such as resetting the stack while navigating to a route, is absurdly complicated.

Within my navigation reducer, I have a 1-liner utility function called fullResetTo with params for the routeName and optional params. But from a container that is dispatching a resetTo, where the stack must be reset to index: 0, it would be nice to have a better way to handle a simple dispatch - such as a fullResetTo function where you pass in the routeName and optionally pass in params. I have reached out to other IR devs for support on a best practices solution to this.

from ignite-andross.

@HelloEdit
Here's a simple example of how to navigate between screens that are listed under a single StackNavigator:

Given this StackNavigator:

// Manifest of possible screens
export default StackNavigator({
  LoginScreen: { screen: LoginScreen },
  TosScreen: { screen: TosScreen },
  HelpScreen: { screen: HelpScreen }
}, {
  // Default config for all screens
  headerMode: 'none',
  initialRouteName: 'LoginScreen'
})

From the LoginScreen, let's add a button that navigates directly to the TosScreen. This example just shows the navigation portion of the LoginScreen:

render () {
  const { navigate } = this.props.navigation
  return (
    <View style={styles.container}>
      <Button
        title='Go to Terms of Service'
        onPress={() => navigate('TosScreen')}
      />
    </View>
  )
}

The navigate function is available from this.props.navigation in any screen that is opened by react navigation.

Now, let's add a button that takes the user back one screen in the navigation stack. This example shows how we do this from the TosScreen:

render () {
  const { goBack } = this.props.navigation
  return (
    <View style={styles.container}>
      <Button
        title='Go Back'
        onPress={() => goBack()}
      />
    </View>
  )
}

The goBack function, like the navigate function, is available from this.props.navigation.

from ignite-andross.

@derekgreenberg Can you provide an example of the fullResetTo utility function?

from ignite-andross.

@tmaly1980 here you go:

const fullResetTo = (routeName, params = {}) => {
  return getStateForAction(
    reset({
      index: 0,
      actions: [
        navigate({ routeName: routeName, params })
      ]
    })
  )
}

const NOT_LOGGED_IN_STATE = fullResetTo('NotLoggedInStack')

const LOGGED_IN_STATE = fullResetTo('LoggedInStack')

later in export function reducer, where we reference calls to fullResetTo():

export function reducer (state = INITIAL_STATE, action) {
  let nextState
  switch (action.type) {
    case 'READY_FOR_LOGIN':
      return NOT_LOGGED_IN_STATE
    case 'REQUEST_PASSCODE_SUCCESS':
      return readyForVerification(state)
    case 'LOGOUT':
      return NOT_LOGGED_IN_STATE
    case 'LOGIN_SUCCESS':
      return LOGGED_IN_STATE
    case 'AUTO_LOGIN':
      return LOGGED_IN_STATE
    case 'LOGIN_FAILURE': // Fall-through for somethingHappened
    case 'NEW_RESERVATION_FAILURE':
    case 'ITINERARY_FAILURE':
    case 'GET_MESSAGING_TOKEN_FAILURE':
      return somethingHappened(state, action)
    case 'NEW_RESERVATION_RECEIVED':
      return openNewReservation(state, action)
  }
  // Fall through - no action.type matches returned a function that calls getStateForAction
  nextState = getStateForAction(action, state)
  // state defaults to INITIAL_STATE, so the initial getStateForAction is returned by state
  return nextState || state
}

from ignite-andross.

Looking forward to reviewing your PR, @skellock .

from ignite-andross.

@skellock What's the timeline on this? Post-Andross?

from ignite-andross.

Yes.

from ignite-andross.

Sweet. Great tip @heyjared !

from ignite-andross.

@heyjared you will need to avoid using navigation.navigate and handle all navigation actions in your sagas to avoid that error.

from ignite-andross.

@harrisrobin I don't have navigation.navigate anywhere except in the pre-generated PresentationScreen, but I do dispatch NavigationActions in my container components and not in sagas, does that make a difference?

from ignite-andross.

Hello,

Where are you on Redux + react-navigation integration ?
thanks for all 😄

from ignite-andross.

Actually @derekgreenberg - I'll be adding it today. We should circle up on that PR.

I have a pretty nice minimal version of React Navigation + Redux that you can build off of in the example login.

from ignite-andross.

@GantMan sounds good - the example login can be updated to work with the minimal version of React Navigation + Redux reflected in your upcoming PR to ignite-ir-boilerplate .

from ignite-andross.

FInally closed by #85

from ignite-andross.

This is really cool, but if I want to navigate between two screen, I need to use

const { navigate } = this.props
<button onPress={() => navigate(...)} />

or

dispatch(NavigationActions.navigate(...))}

?
I begin to understand Redux and the philosophy of React Navigation 😌
Maybe one line to explain this in the README of the boilerplate would be helpful for beginner ^^

Thank for your work 😙

from ignite-andross.

@derekgreenberg , any plans for a saga that simplifies/wraps navigate() and reset() ? I honestly find the resetting process (having to declare a nested data structure) really tedious compared to just passing a screen name (ie a string) to reset TO. It should be as simple as:

dispatch(NavigationActions.reset('HomeScreen'))

But sadly it's much more complicated (and absurd, given how common such a thing is):

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'HomeScreen'}),
  ]
})
dispatch(resetAction)

This alone was enough reason for me to switch to wix's react-native-navigation, which has sensible functions for manipulation the navigation/changing screens. With some wrappers in a saga, it might be manageable. Until then, I'll be using wix' navigation solution.

from ignite-andross.

@derekgreenberg, I have lost a lot of time to understand 'props. navigation' in ignite 2. Why haven't you written anything in the documentation??

from ignite-andross.

@pherm

That is a fair question. Why doesn't the readme.md file explicitly call out the fact that the Ignite 2 boilerplate uses react-navigation, and help users understand how navigation was implemented?

The documentation (https://github.com/infinitered/ignite-ir-boilerplate/blob/master/readme.md) has a Navigation section that does not explicitly inform users that the boilerplate uses react-navigation. If you don't know that the boilerplate's navigation stack uses react-navigation, then it would be difficult to understand where to find information about props.navigation, such as documented here: https://www.codementor.io/blessingoraz/understanding-navigation-in-react-native-a3wlcxmzu?published=1#.WXfDlvk_ooE.twitter.

I can update the readme.md file under the Navigation section to explicitly say that the boilerplate uses react-navigation, with a link to https://github.com/react-community/react-navigation, and provide helpful links for users to learn more about it.

Would that be helpful?

from ignite-andross.

@derekgreenberg yeah, thank you! good documentation is the basis for understanding

from ignite-andross.

For the new guys who face this issue add nav to config/ReduxPersist.js file blacklist

blacklist: ['appState', 'search','nav'],

from ignite-andross.