Понимание шаблонов архитектуры redux

Я изучаю React / Redux и пытаюсь создать базовое приложение, которое будет входить в набор приложений.

У меня возникли проблемы с осмыслением «правильной» архитектуры для такого приложения или даже с подходом к сокращению. На базовом уровне мне нужно что-то вроде:

Главное приложение ---> Панель инструментов приложения -> Кнопка выхода

Таким образом, они по сути представляют мои реагирующие компоненты. В My Main есть панель инструментов с кнопкой выхода. Но как мне правильно реализовать функцию выхода из системы? В примерах, которые я ищу, я, кажется, нахожу противоречивые реализации.

Один из способов, которые я видел, передает функции вниз из основного приложения (которое отвечает за состояние входа в систему). Итак, я бы сделал:

<Provider store={store}>
    <ToolBar logout="() => { this.logout(); }"/>
</Provider>

В моем компоненте приложения и объявить его в реквизитах моего компонента ToolBar, который будет вызываться при выходе из системы. Но мне это кажется действительно антипаттерновым, потому что в большом приложении я просто собираюсь закончить тем, что функции родительского уровня будут передаваться вниз через цепочки дочерних элементов, и это быстро станет очень беспорядочным.

Итак, еще один возможный ответ - отправить действия? Тогда мой компонент Панели инструментов будет делать:

<button onClick={ () => {this.props.store.dispatch(MY_LOGOUT_ACTION());} } />

Затем компонент приложения использует действие и выполняет выход. Если это правильно, то каков правильный код для выполнения действия на родительской стороне?

Спасибо всем за ваше время.

Компонентам не нужно отправлять действия напрямую (они вообще не видят store или dispatch). Они просто получают состояние редукции, переданное как реквизиты через mapStateToProps, и могут вызывать действия (также реквизиты, но функции) через mapDispatchToProps. Ваша панель инструментов может быть отображена как <Toolbar> и получит необходимые привязки redux, будучи подключенным компонентом.

timotgl 11.04.2018 12:09

@timotgl А это делается через mapDispatchToProps? Итак, мое действие должно быть объявлено в функции ToolBar mapDispatchToProps? Как мне затем выполнить отправку?

Samih 11.04.2018 12:25

Действия обычно объявляются в отдельном модуле. Модуль, в котором вы создаете подключенный компонент, импортирует их. Итак, это const mapDispatchToProps = { action };, а подключенный компонент просто называет this.props.action().

timotgl 11.04.2018 14:02
0
3
359
1

Ответы 1

Вы также должны использовать реагирующий маршрутизатор. Ниже код, относящийся к версии response-router@3.x. Последняя версия - 4.

Шаг 1 - Управляйте своими маршрутами

<Provider store={store}>
  <Router history={hashHistory}>
    <Route path="/" component={Login} />
    <Route path="toolbar" component={toolbar} onEnter={ensureUserLoggedIn}>
        <!-- Any sub routes-->
        <Route path="toolbarsub1/:id" component={sub1} />
    </Route>
</Provider>

Шаг 2 - Некоторая функция для проверки аутентификации пользователя

ensureUserLoggedIn = () => /* return true or false based on ur Auth/Cookie/Local storage usage, if the user is logged in or not*/

Шаг 3

Вы входите и выходите из системы - это действия, отправленные в redux.

Сампе user.actions.js

export const logOutUser = () => ({
  type: LOGOUT_USER,
});

export const logInUser = (creds) => ({
  type: LOGIN_USER,
  creds,
});

Убедитесь, что после отправки действия logInUser функция sureUserLoggedIn должна возвращать false при вызове.

Это должна быть идеальная архитектура входа / выхода с использованием redux.

Спасибо за ответ, но вы идете на шаг впереди меня. Я не спрашиваю конкретно о входе / выходе из приложения, это просто пример. Я спрашиваю о правильном способе взаимодействия двух компонентов, когда дочернему элементу необходимо сообщить родительскому контейнеру о некотором вводе пользователя (например, при нажатии кнопки выхода из системы).

Samih 11.04.2018 13:07

Если ребенку нужно отправить некоторую информацию родительскому компоненту, тогда. OuterComponent.jsx -------------------------- const updateSomeData = (data) => {console.log ('Данные достигли внешнего компонента'); } render (<OuterComponent> <InnerComponet callback = {this.updateSomeData}> </OuterComponent>); Рендеринг InnerComponet.jsx (<Div> <span onClick = {e => this.props.callback}> </Div>);

alowsarwar 11.04.2018 13:13

Спасибо, что означает "this" в this.updateSomeData, когда ваша функция объявлена ​​как константа?

Samih 11.04.2018 13:16

Есть два способа привязать функцию к классу React, что важно, если вы не привязываете, тогда вызывающие 'this' будут преобладать над 'this' компонента React, что нежелательно. Способ 1. В конструкторе -------------- MyComp расширяет React.Component {constructor (props) {this.state = {}, таким образом .updateSomeData = this.updateSomeData.bind.this () ; }} Способ 2: Использование сокращенной функции ES6 без упоминания в конструкторе ---------------- MyComp extends React.Component {const = updateSomeData (inputdata) => console.log (' Данные достигли внешнего компонента '); }

alowsarwar 11.04.2018 13:23

Другие вопросы по теме