Итак, давайте предположим, что вы определили свои маршруты в компоненте src/components/App.js.Вы находитесь в точке, когда вам нужно убедиться, что ваш App компонент знает, действительно ли пользователь вообще вошел в систему.
Давайте также предположим, что вы уже разработали редуктор в reducers/auth.js длязапишите, вошел ли пользователь в систему или нет, и вы присвоили authReducer вашему auth элементу состояния.
На данный момент, внутри вашего файла src/components/App.js вам потребуется импортировать:
import { connect } from 'react-redux';
Затем в нижней части вашего App компонента вам нужно определить свой mapStateToProps следующим образом:
function mapStateToProps(state) {
return { auth: state.auth }
}
export default App;
Итак, что я рекомендую выше, так эточто вы передаете state в mapStateToProps, а затем return объект с ключом auth, который будет принимать любое значение, выходящее из authReducer.
Затем вы берете connect() функция, которую вы импортировали, и передайте ей mapStateToProps следующим образом:
export default connect(mapStateToProps)(App);
Так что теперь ваш App компонент знает, вошел ли пользователь в систему или нет.
Так в чем же преимущество реализации вышеуказанного?Ну, это дает вам гибкость в определении того, что отображать в вашем представлении, в зависимости от того, вошел ли пользователь в систему или нет.Например, кнопка входа / выхода.
Теперь вы можете разработать эту кнопку с помощью вспомогательного метода с условным условием, подобным следующему:
renderButton() {
if (this.props.auth) {
return (
<button>
Sign Out
</button>
);
} else {
return (
<button>
Sign In
</button>
);
}
}