Using Redux connect() with Layout component being passed children and receiving props

Question

I'm having some difficulty getting my Layout component to connect because I'm passing children. Basically the way I have my application setup is that app.js houses the provider, persistgate, layout, and react-navigation navigation stack.

The only component which I haven't connected so far is my Layout, and before I started to implement some navigation on the top bar, I didn't really need it. Now I want to be able to pass the routeName to redux so that the Layout knows which route the user is on and can display appropriate buttons.

I've tried a few things, but nothing seems to work, if I manage to get the Layout to load with connecting, it doesn't seem to obtain the routes from redux store even though I've confirmed that it is there on React-Native Debugger.

app.js

export class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <Layout>
                        <AppWithNavigationState/>
                    </Layout>
                </PersistGate>
            </Provider>
        )
    }
}

Layout.js This is what I used BEFORE.

    class Layout extends Component {

  render() {
      const currentRoute = this.props.route;
      console.log(this.props.route); ////// TESTING TO SEE IF ROUTES SHOWS. IT'S ALWAYS "UNDEFINED" DESPITE BEING IN THE STORE.
     headerButton = () => {
          if (currentRoute==='Main') { 
                return (<Icon onPress={() => navigate({routeName: "PostForm"})} style={styles.headericon} name="back"></Icon>);
            } else {
                return (<Icon style={styles.headericon} name="menu"></Icon>)
            }
        }

.......
export default ({children}) => (
    <Layout>
        {children}
    </Layout>
)

Layout.js Test (updated but still not receiving store data)

Layout.propTypes = {
    children: PropTypes.node,
    route: PropTypes.string,
    updateRoute: PropTypes.func
 };

const mapStateToProps = state => ({
    route: state.route.route
 });

const mapDispatchToProps = (dispatch) => {
    return {
        updateRoute: route => dispatch(postActions.updateRoute(route))
    }
}

const LayoutTest = ({children}) => (
    <Layout>
        {children}
    </Layout>
)


export default connect(mapStateToProps, mapDispatchToProps)(LayoutTest);

Answer 1

Turns out I do not even need to pass 'children' to the components. I rendered it by changing

export default ({children}) => (
    <Layout>
        {children}
    </Layout>
)

to

export default connect(mapStateToProps, mapDispatchToProps)(Layout)

After doing some testing and realizing that the state was actually able to be read inside of the mapStateToProps function but it was not mapping to Layout. The reason I was so confused was that I really thought I needed to pass children to it the way I had it before. Luckily I never!