[V4] Unable to access connected actions after migration

[alvarolorentedev]

Version

Tell us which versions you are using:

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

Expected behaviour

i can connect the router and my components to have access to redux, so I have access to conected actions.

Actual behaviour

No access to redux actions.

Steps to reproduce

In version 3 i could define my routes and connect them to my action in the next way.

const scenes = Actions.create(
    <Scene key="root" hideNavBar={true} tabs={false} >
        <Scene key="tabbar" tabs={false} hideNavBar={true}>
            <Scene key='main' component={main} title="Main" initial/>
        </Scene>
     </Scene>
)

const RouterWithRedux = connect()(Router)

class AppContainer extends Component {
render() {
        return <RouterWithRedux {...this.props} scenes={scenes}/>
    }
}

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

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

as you can see 2 things where happening the connection of the the definition of a connected Router that had the defined scenes and the connection of the main container to the set of available actions.

in any of the underlaying components if I have

<Button onPress={() => {
                    console.log(this.props.addToInventory)
                    this.props.addToInventory()
                }}><Text>Add</Text></Button>

it will print undefined.

what am i doing wrong? 🤔

[alvarolorentedev]

so there seems to be a problem with Actions.create or the binding with the scene (there must be a small change there from v3).

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)

removing create scenes and the connected router with redux worked for me, but i am still curious, on if this is by design and will it continue working on the future?

is this somehow related to migration point 1? (No component support for scene containers (that contains children Scene) - you have to use custom navigators (navigator prop) and possibly contentComponent (scenes cannot have both 'component' and 'children'))

[aksonov]

You are right, it was migration change, sorry.