У мене є компонент-контейнер response-redux, який створений у складі компонента React Native Navigator. Я хочу мати можливість передавати навігатор як підказку до цього компонента контейнера, щоб після натискання кнопки всередині його презентаційного компонента він міг штовхнути об'єкт у стек навігатора.

Я хочу зробити це без необхідності вручну писати весь шаблонний код, який дає мені компонент контейнера response-redux (а також не пропустити всіх оптимізацій, які реакція redux дала б мені і тут).

Приклад коду компонента контейнера:

const mapStateToProps = (state) => {
    return {
        prop1: state.prop1,
        prop2: state.prop2
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onSearchPressed: (e) => {
            dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator
        }
    }
}

const SearchViewContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(SearchView)

export default SearchViewContainer

І я хотів би мати можливість викликати такий компонент з моєї renderSceneфункції навігатора :

<SearchViewContainer navigator={navigator}/>

У наведеному вище коді контейнера я мав би мати можливість отримати доступ до цього переданого опису всередині mapDispatchToPropsфункції.

Я не хочу зберігати навігатор на об'єкті стану redux і не хочу передавати опис до презентаційного компонента.

Чи є спосіб передати проп до цього компонента контейнера? Як варіант, чи є якісь альтернативні підходи, на які я не звертаю уваги?

Дякую.

mapStateToPropsі mapDispatchToPropsобидва приймають ownPropsза другий аргумент.

[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

Для довідки

Ви можете передати другий аргумент, mapStateToProps(state, ownProps)який надасть вам доступ до реквізиту, переданого компоненту в mapStateToProps

При виконанні цього з машинописом є кілька помилок, тому ось приклад.

Одна проблема, коли ви використовуєте лише dispatchToProps (а не зіставляєте будь-який реквізит стану), важливо не пропускати параметр стану (його можна назвати префіксом підкреслення).

Ще одна помилка полягала в тому, що параметр ownProps потрібно було набирати за допомогою інтерфейсу, що містить лише переданий реквізит - цього можна досягти, розділивши інтерфейс реквізиту на два інтерфейси, наприклад

interface MyComponentOwnProps {
  value: number;
}

interface MyComponentConnectedProps {
  someAction: (x: number) => void;
}

export class MyComponent extends React.Component<
  MyComponentOwnProps & MyComponentConnectedProps
> {
....//  component logic
}

const mapStateToProps = (
  _state: AppState,
  ownProps: MyComponentOwnProps,
) => ({
  value: ownProps.value,
});

const mapDispatchToProps = {
  someAction,
};

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

Компонент можна оголосити, передавши один параметр:

<MyComponent value={event} />

Використання декораторів (@)

Якщо ви використовуєте декоратори, наведений нижче приклад наводить приклад у випадку, якщо ви хочете використовувати декоратори для вашого redux connect.

@connect(
    (state, ownProps) => {
        return {
            Foo: ownProps.Foo,
        }
    }
)
export default class Bar extends React.Component {

Якщо ви зараз перевірите, this.props.Fooви побачите додаток, який був доданий з того місця, де використовувався Barкомпонент.

<Bar Foo={'Baz'} />

У цьому випадку this.props.Fooбуде рядок 'Baz'

Сподіваюся, це з’ясовує деякі речі.