React-native-router-flux: How connect with redux RNRF v4

[DavidPineda]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.28
• react-native v0.52.1

Expected behaviour

Updating the version of RN to 0.52.1 I also had to update the version of RNRF to 4, however my existing code broke and does not connect with redux as before.

This is my code that worked with version 3 of RNRF

import React from 'react'
import { Scene, Router } from 'react-native-router-flux'
import NavigationDrawer from './NavigationDrawer'
import { connect } from 'react-redux'

const RouterWithRedux = connect()(Router)

const NavigationRouter = () =>


...

Esto conectaba con el estado y podia almacenar la escena actual

Actual behaviour

It does not connect with the state.

Steps to reproduce

1. update rn version
2. update rnrf version

[coolmic]

Same error here, I upgraded from
4.0.0-beta.23 to 4.0.0-beta.28 .

Before, it works with

const mapStateToProps = state => ({ state: state.nav });
const ReduxRouter = connect(mapStateToProps)(Router);
export default ReduxRouter;

With the last version, I have this weird error :

This navigator has both navigation and container props, so it is unclear if it should own its own state. Remove props: "uriPrefix" if the navigator should get its state from the navigation prop. If the navigator should maintain its own state, do not pass a navigation prop.

For some reason, createNavigationContainer/NavigationContainer/_validateProps trigger an error because it receive a { uriPrefix: undefined } in the props.

If I remove the mapStateToProps, I have no error, but the router does not dispatch actions, and don't react to state change.

[rovnyart]

same error, 4.0.0-beta.28
react-redux v.5.0.6

Not connecting to state at all, no actions dispatched, no errors occured.

[rikur]

+1

[luizguilhermefr]

+1

[bialasik]

+1

[gastonmorixe]

+1

[kanekotic]

+1

[remoteportal]

+1

[fbaskara]

+1

[kanekotic]

so i manage to nake it work

class AppContainer extends Component {
    render() {
            return <Router {...this.props}>
                        <Scene key="root" hideNavBar={true} tabs={false} >
                            <Scene key="tabbar" tabs={false} hideNavBar={true}>
                                <Scene key='main' component={main} title="Main" />
                                <Scene key='inventory' component={inventory} title="Inventory" initial/>
                            </Scene>
                        </Scene>
                    </Router>
        }
    }

function mapDispatchToProps(dispatch){
    return bindActionCreators(ActionCreators, dispatch)
}

export default connect(() => {return {}}, mapDispatchToProps)(AppContainer)

The behaviour is that Create is broken in v4 and also there is a problem in v4 doing RouterWithRedux because seem that extra level has also an issue with passing the props.

hope they solve the issues soon.

[aksonov]

Could someone change Example accordingly and reproduce this issue with latest version (4.0.0-beta.42) ?

[kanekotic]

I can try to do this. If its ok to wait till the weekend.

[aksonov]

I've just updated ReduxExample for full Redux integration using official react navigation guide (https://reactnavigation.org/docs/en/redux-integration.html), please use version 4.0.1

[daviscabral]

Hey guys - any update with the Redux testing here? Can I close this issue? Thank you.

[daviscabral]

I believe we can consider this done. Please open a new issue referring this one in case something new pops up.