Использование Redux для обмена статусом входа между компонентами
Я только что переключил поток данных моего приложения на Redux, но на самом деле не понимаю.
Мой мудрый компонент выглядит так:
const LoginPage = ({ auth, doLogin, doLogout }) => (
<div>
<NavBar/>
<div className = "row">
<div style = {{display: 'flex', justifyContent: 'center'}} className = "col-md-4 col-md-offset-4">
<LoginForm doLogin = {doLogin} doLogout = {doLogout} auth = {auth} />
</div>
</div>
</div>
);
const mapStateToProps = state => ({
auth: state.auth,
});
export default connect(mapStateToProps, { doLogin, doLogout })(LoginPage);
Итак, насколько я понял, я должен использовать mapStateToProps для вызова состояний из store для отображения в свойствах компонента.
Теперь в моем компоненте LoginForm, который является компонентом с полем для входа в систему, я передаю doLogin, doLogout и auth.
Я не уверен в том, где использовать вызов API, который POST передает информацию для входа.
В моем auth.js я записал свой doLogin как:
export const doLogin = (username, password) => {
//console.info(username, password);
//return {
// type: 'types.AUTH_LOGIN'
//};
var self = this;
axios.post('http://localhost:5000/signin',
{
username: username,
password: password
})
.then(function (response) {
console.info(response);
if (response.data.status === "Successful"){
console.info("Login successfull");
}
else{
console.info("There is no user with the given username and password");
//alert("Username does not exist");
}
}
)
.catch(function (error) {
console.info(error);
});
};
Как вы видите в моем комментарии,
//return {
// type: 'types.AUTH_LOGIN'
//};
Я попытался вернуть объект создателю действия. Но я не уверен, как это работает и как меняется мое состояние в магазине.
Я знаю, что редукторы возвращают только что измененное состояние, но как сделать это изменение?
Подводя итог, моя цель - изменить состояние isLoggedin на true на основе моего вызова axios, использованного в действии.
Спасибо. Но комментарий на самом деле не отвечает на то, как меняются состояния в зависимости от вызова API в Redux.
Вы проверили ответы на связанные вопросы?
Ответы 1
Первые поздравления за то, что заявили о сокращении :) Поначалу это сложно, но потом будет супер круто.
- в вашем "mapDispatchToProps" у вас должна быть функция, которая возвращает объект ключевых функций.
то есть:
const mapDispatchToProps = dispatch => {
return ({
login: (user, pass) => dispatch(loginActionCreator(user, pass)),
logout: _ => dispatch(logoutActionCreator())
})
}
после того, как мы это сделали, нам нужно обработать вышеупомянутые создатели действий.
Перед этим несколько примечаний:
- Действия redux НЕ обрабатывают асинхронные вызовы
- вам нужно будет использовать какое-то промежуточное программное обеспечение
- redux-thunk очень приятный и простой для понимания
- redux-saga немного сложнее, но мощнее
- Я бы начал с redux-thunk и добавил примеры для нашей вышеупомянутой ситуации
actionCreators.js
const loginActionCreator = (username, pass) => {
return dispatch => {
dispatch({type: 'login_start'});
axios.post('http://localhost:5000/signin', {
username: username,
password: password
})
.then(function (response) {
console.info(response);
if (response.data.status === "Successful"){
console.info("Login successfull");
dispatch({type: 'login_success', data: response.data})
}
else{
console.info("There is no user with the given username and password");
dispatch({type: 'login_failed', err: 'no username found'})
}
}
.catch(function (error) {
console.info(error);
dispatch({type: 'login_failed', err: error'})
});
}
}
const logoutActionCreator = () => {
return dispatch => {
dispatch({type: 'logout'});
}
}
Примеры далеки от совершенства, но они для общего представления. Вам нужно будет начать копаться в асинхронных действиях внутри redux, таких как библиотеки, о которых я упоминал выше.
Наслаждаться!
Большое спасибо. В вашем примере из какой части я должен вызывать вызов axiosPOST?
где я добавил "loginAjaxCall", это ваш axios или любой другой вызов библиотеки ajax. В этом примере используются обещания, но вы можете использовать обратные вызовы или что-то еще. Просто убедитесь, что вы понимаете поток. "отправка" получает объект только ни больше ни меньше
Если вы посмотрите на мой призыв axios в моем вопросе, я не уверен, где должен быть dispatch и какой эффект он приносит. Когда и зачем нам нужен dispatch?
для отправки асинхронного действия используйте промежуточное ПО вроде этого:
redux-thunk, прочтите этот ответ, вы получите все ответы и решение также зачем нам промежуточное ПО и использование redux-thunk