Передача реквизитов компоненту контейнера react-redux

Question

Передача реквизитов компоненту контейнера react-redux

у меня есть компонент контейнера react-redux, который создается в компоненте React Native Navigator. Я хочу иметь возможность передать навигатор в качестве опоры для этого компонента контейнера, чтобы после нажатия кнопки внутри его презентационного компонента он мог нажать объект в стек навигатора.

Я хочу сделать это без необходимости вручную писать весь шаблонный код, который дает мне компонент контейнера react-redux (а также не пропустить все оптимизации это react-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}/>

в приведенном выше коде контейнера мне нужно будет получить доступ к этой переданной опоре изнутри .

Я не хочу хранить навигатор на объекте состояния redux и не хочу передавать опору вниз к презентационному деталь.

есть ли способ, которым я могу передать опору этому компоненту контейнера? Кроме того, есть ли какие-либо альтернативные подходы, которые я пропускаю?

спасибо.

757 4

reactjs react-native redux react-redux

4 ответов:

Comments

Ничего не найдено.

Abhinav Singi · Accepted Answer · 2016-11-01 15:40:55

mapStateToProps и mapDispatchToProps Как принимать ownProps как второй аргумент.
[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):
на ссылка

Conor Hastings · Accepted Answer · 2016-06-13 09:27:49

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

Joe Lloyd · Accepted Answer · 2018-04-08 11:47:48

С Помощью Декораторов (@)

если вы используете декораторы, приведенный ниже код дает пример в случае, если вы хотите использовать декораторы для вашего redux connect.
@connect(
    (state, ownProps) => {
        return {
            Foo: ownProps.Foo,
        }
    }
)
export default class Bar extends React.Component {
если вы сейчас проверить this.props.Foo вы увидите опору, которая была добавлена оттуда, где компонент.
<Bar Foo={'Baz'} />
в этом случае this.props.Foo будет строка 'Baz'

надеюсь, что это проясняет некоторые вещи.

Damian Green · Accepted Answer · 2018-05-25 16:11:28

есть несколько gotchas при выполнении этого с typescript, так что вот пример.

один gotcha был, когда вы используете только dispatchToProps (а не сопоставление каких-либо реквизитов состояния), важно не опускать параметр состояния (он может быть назван с префиксом подчеркивания).

еще одна проблема заключалась в том, что параметр ownProps должен был быть набран с использованием интерфейса, содержащего только переданные реквизиты - это может быть достигнуто путем разделения интерфейса props на два интерфейса, например,
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} />