Ожидание изменения состояния в реакции с редукцией

54
5

Я использую redux в реакции-native для извлечения данных из api, вот что я сделал до сих пор

api_type.js

export const USER_LOGIN = 'user_login_action';
export const USER_LOGINING = 'logining_users';
export const USER_LOGEDIN = 'user_logged_in';

index.js

import axios from 'axios';
import { USER_LOGIN, USER_WALLETS,USER_LOGINING } from './api_types';

const AUTH_API_URL = 'http:/api/v1';
const CORE_API_URL = 'http:/api/v1';
let username="";
let password="";
let auth_token ="";
let AuthStr = "";

export function UserWallets(){

return function(dispatch){
AuthStr ="Bearer "+auth_token;
console.log ("new auth : "+AuthStr);
axios.defaults.headers.common['Authorization'] = AuthStr
axios.get('${CORE_API_URL}/wallet/allwallets')
.then(response => {
dispatch({
type: USER_WALLETS,
payload: response['data']
});
}).catch((error) => {
console.log(error);
})
}
}
export function UserLogin() {
return function(dispatch) {
dispatch({
type:USER_LOGINING
});

axios.post(
'${AUTH_API_URL}/authenticate/users',
{
email: username,
password: password
}

)
.then(response => {
dispatch({
type: USER_LOGIN,
payload: response['data']
});
auth_token=response['data']['token'];

}

)
.catch((error) => {
console.log(error);
})
}
}

export function username(term) {
username=term;
console.log("username " +username);
return{
type:"username",
username
};
}
export function password(term) {
password=term;
console.log("password " +password);
return{
type:"password",
password
};
}
export function authToken (term){
auth_token = term;
return{
type:"authtoken",
auth_token
}
}

auth_reducer.js

import { USER_LOGIN ,USER_LOGINING } from '../actions/api_types';

const INTIAL_STATE = {
message: '',
token:'',
logging: false,
loggedin: false,
loginerr: null,
};

export default function (state = INTIAL_STATE, action) {
console.log("present state"+action.type);
switch(action.type) {
case USER_LOGIN:{
return { ...state, message: action.payload.message, token:action.payload.token,loggedin:true};
}
case USER_LOGINING:{
return {...state,logging:true }
}
default:{
console.log("default "+action.type);
}
}
return state;
}

index.js//объединить редуктор

import { combineReducers } from 'redux';

import drawer from './drawer';
import AuthReducer from './auth_reducer';
import CoreReducer from './core_reducer';

export default combineReducers({
auth: AuthReducer,

});

я создал и настроил хранилище и завернул свое приложение с провайдером из response-redux, и я передал его поставщику, в двух словах я теперь могу получить доступ к хранилищу из своих компонентов. ниже - это функция в моем login_component, которая срабатывает, как только я нажимаю на логин

login(){
if(this.state.email==""){
alert("Email require");
return;
}else if(this.state.password==""){
alert("password require");
return;
}else{
//set the paramter for the reducer to use
this.props.username(this.state.email);
this.props.password(this.state.password);
//activate the user login action

this.props.UserLogin();

if(!this.props.auth.loggedin){
console.log("logging in");
//show loadging gif
}
//checking from response from the auth api
if(this.props.auth.message=="user successfully logged in"){
alert(this.props.auth.token);
Actions.home();
}else{
alert("invalid Username/Password");
}
}
}

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

спросил(а) 2020-04-04T01:33:48+03:00 3 месяца назад
1
Решение
108

я, наконец, получил решение проблемы, api-вызов был асинхронным, но проблема заключалась в том, что в компоненте я тестировал ответ, прежде чем изменения хранилища, поэтому вот решение, я добавил следующее в мой компонент входа

componentWillReceiveProps(nextProps) {
console.log("component update");
if(nextProps.auth.loggedin==true){

if(nextProps.auth.message=="user successfully logged in"){
this.setState(previousState => {
return { spinnerv: false };
});
Actions.home();
}else{
alert("invalid Username/Password");
}
}
}

что происходит здесь, это функция componentWillReceiveProps, проверьте, изменились ли состояния, а затем текст, если ответ является компонентомWillReceiveProps. спасибо jmargolisvt за вашу поддержку. Я надеюсь, что это поможет кому-то другому.

ответил(а) 2020-04-04T01:44:43.867459+03:00 3 месяца назад
40

Вы должны выполнить этот API-вызов асинхронно. В основном, вы будете иметь функцию входа в систему, чтобы отправить асинхронное действие, которое вызовет вызов API. Затем из ваших методов успеха/сбоя вызова API вы отправите другой (синхронный) вызов, который либо вводит в журнал пользователя, либо нет.

Вы хотите включить Redux Thunks, чтобы выполнить асинхронный вызов. https://github.com/gaearon/redux-thunk

ответил(а) 2020-04-04T01:33:48+03:00 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема