Полезная нагрузка не определена - PullRequest
Новая
       60

Полезная нагрузка не определена

1 голос
/ 14 января 2020

Я разработчик PHP / Laravel среднего уровня. Я совершенно нуб, когда дело доходит до реакции. js. Теперь я знаю, что реакция использует API и прочее для отображения данных, когда дело доходит до laravel бэкэнда. Я привык к традиционным HTML, CSS, JS, Bootstrap, Ajax и прочее. У меня есть простая задача, чтобы войти в систему пользователя от реакции через laravel бэкэнд. Я создал API для этой задачи, и они работают совершенно нормально, и почему-то мне повезло, и я прикрепил эти API ALL BY MYSELF (с небольшим исследованием, конечно) . Теперь всякий раз, когда я пытаюсь войти в систему, я получаю обычные данные через запрос ax ios на бэкэнд и хранит их в переменной signInUser. Теперь, когда я пытаюсь передать эти данные в другую функцию действия, это происходит как-то undefined. Вот мой код, чтобы вы могли понять, чего я пытаюсь достичь:

Компоненты \ Вход. js

constructor() {
    super();
    this.state = {
      email: '',
      password: ''
    }
}

componentDidUpdate() {
     if (this.props.showMessage) {
         setTimeout(() => {
             this.props.hideMessage();
         }, 100);
     }
     if (this.props.authUser !== null) {
         this.props.history.push('/');
     }
}

render() {
    const {email, password} = this.state;
    const {showMessage, loader, alertMessage} = this.props;
    return (
        // other components and stuff...
        <Button onClick={() => { this.props.showAuthLoader(); this.props.userSignIn({email, password});}} variant="contained" color="primary">
            <IntlMessages id="appModule.signIn"/>
        </Button>
    );
}

const mapStateToProps = ({auth}) => {
    const {loader, alertMessage, showMessage, authUser} = auth;
    return {loader, alertMessage, showMessage, authUser}
};

export default connect(mapStateToProps, {
    userSignIn,
    hideMessage,
    showAuthLoader
})(SignIn);

Sagas \ Auth . js

const signInUserWithEmailPasswordRequest = async (email, password) =>
    await axios.post('auth/login', {email: email, password: password})
    .then(authUser => authUser)
    .catch(err => err);

function* signInUserWithEmailPassword({payload}) {
    const {email, password} = payload;
    try {
        const signInUser = yield call(signInUserWithEmailPasswordRequest, email, password);
        if (signInUser.message) {
            yield put(showAuthMessage(signInUser.message));
        } else {
            localStorage.setItem('user_id', signInUser.data.user.u_id);
            yield put(userSignInSuccess(signInUser.data.user.u_id));
        }
    } catch (error) {
        yield put(showAuthMessage(error));
    }
}

export function* signInUser() {
    yield takeEvery(SIGNIN_USER, signInUserWithEmailPassword);
}

export default function* rootSaga() {
    yield all([fork(signInUser),
    // couple of other functions...
    );
}

действия \ Auth. js

export const userSignIn = (user) => {
    return {
        type: SIGNIN_USER,
        payload: user
    };
};

export const userSignInSuccess = (authUser) => {
    console.log(authUser); // It's printing undefined, I don't know why?!
    return {
        type: SIGNIN_USER_SUCCESS,
        payload: authUser
    }
};

редукторы \ Auth. js

const INIT_STATE = {
    loader: false,
    alertMessage: '',
    showMessage: false,
    initURL: '',
    authUser: localStorage.getItem('user_id'),
};

export default (state = INIT_STATE, action) => {
    switch (action.type) {
        case SIGNIN_USER_SUCCESS: {
            return {
                ...state,
                loader: false,
                authUser: action.payload
            }
        }

        case INIT_URL: {
            return {
                ...state,
                initURL: action.payload
            }
        }

        default:
            return state;
    }
}

Ps : Это купленный шаблон реакции. js (не мой код).

...