Использование Redux connect() с передачей дочерним компонентам компонента Layout и получением реквизита

Question

У меня возникли некоторые трудности с подключением компонента Layout, потому что я передаю детей. По сути, у меня есть настройка приложения, в которой app.js содержит стек навигации провайдера, персистента, макета и реагирующей навигации.

Единственный компонент, который я до сих пор не подключил, - это мой макет, и до того, как я начал реализовывать навигацию в верхней панели, он мне действительно не понадобился. Теперь я хочу иметь возможность передать routeName в redux, чтобы Layout знал, по какому маршруту идет пользователь, и отображал соответствующие кнопки.

Я попробовал несколько вещей, но, похоже, ничего не работает, если мне удается загрузить Layout с подключением, он, похоже, не получает маршруты из онлайн-хранилища, даже если я подтвердил, что он есть в React. Родной отладчик.

app.js

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

Layout.jsЭто то, что я использовал до.

    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

Оказывается, мне даже не нужно передавать "дети" компонентам. Я сделал это, изменив

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

в

export default connect(mapStateToProps, mapDispatchToProps)(Layout)

После некоторого тестирования и понимания того, что состояние действительно может быть прочитано внутри функции mapStateToProps, но оно не отображалось в Layout. Причина, по которой я так растерялся, заключалась в том, что я действительно думал, что мне нужно передать детям то, что у меня было раньше. К счастью, я никогда!