Использование локального хранилища с Reaction-Redux? - PullRequest
Новая
       18

Использование локального хранилища с Reaction-Redux?

0 голосов
/ 23 июня 2018

У меня есть проект реагировать на избыточность, который выглядит следующим образом:

Редуктор: 

    export function contentReducer(state = { loading: true }, action) {
    switch (action.type) {
        case types.RETRIEVE_CONTENT_SUCCESS:
            return { ...state, loading: false, contentResults: action.payload.results }
        default:
            return state;
    }
};

Действие: 

export function loginSuccess(loginResult) {
    return { type: types.LOGIN_SUCCESS, loginResult };
}

export function login(formData) {
    return function (dispatch) {
        return submitLogin(formData).then(umvToken => {
            dispatch(loginSuccess(umvToken));
        }).catch(error => {
            throw (error);
        });
    };
}

Сам API: 

export function submitLogin(login) {
    var form = new FormData()
    form.append('userIdentifier', login.email)
    form.append('password', login.password)
    return fetch("http://localhost:8080/login/login/umv",
        {
            method: "POST",
            headers: {
                'Accept': 'application/x-www-form-urlencoded;charset=UTF-8',
            },
            body: form

        }).then(function (response) {
            if (!response.ok) {
                throw Error(response.statusText);
            }
            return response;
        })
        .then(function (token) {
            localStorage.setItem('umvToken', token.text())
            return token
        })
        .catch(function (error) {
            console.log('Looks like there was a problem: \n', error);
        })

}


function mapStateToProps(state) {
    return {
        login: state.login.loginResponse
    }
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(thunks, dispatch)
    };
}
class ConnectedHome extends Component {
    constructor() {
        super();
        this.processForm = this.processForm.bind(this);
    }

    processForm(form) {
        this.props.actions.login(form)
    }


    render() {
        return (
            <div>
                {this.ButtonAppBar()}
                <LoginForm onSubmit={this.processForm} />
            </div >
        );
    }
}

const Home = connect(mapStateToProps, mapDispatchToProps)(ConnectedHome);

export default Home

Однако, когда я пытаюсь получить доступ к локальному хранилищу с домашней страницы, как это: 

var result = localStorage.getItem('umvToken')
        console.log(result)

, я получаю следующее сообщение: 

[object Promise]

Если я заменяю настройкулокальное хранилище с этим: 

   localStorage.setItem('umvToken', 'test')

, тогда console.log покажет test.Но это не работает с фактическим значением.Я не совсем уверен, как решить эту проблему?
Спасибо за вашу помощь!

Ответы [ 3 ]

0 голосов
/ 23 июня 2018

С первой .then функции в вызове API, return response.json(); или return response.text();. Если вы просто возвращаете ответ, это обещание, которое не будет выполнено, если вы не выполните response.json () или response.text (), в зависимости от ожидаемого типа ответа.

0 голосов
/ 24 июня 2018

Используйте следующий код 

.then(function (token) {
            localStorage.setItem('umvToken', JSON.stringify(token))
            return token
        })
0 голосов
/ 23 июня 2018

Я почти уверен, token.text() возвращает Promise, поэтому вам нужно будет подождать, пока он не наберет resolve, чтобы получить фактическую строку токена, т.е. 

.then(function (token) {
  return token.text();
})
.then(tokenText => {
  localStorage.setItem('umvToken', tokenText);
})
...