Using local storage with react-redux? - reactjs

Question

I have a react redux project that looks like this:
Reducer:
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;
}
};
Action:
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);
});
};
}
The Api itself:
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
However when I try to access local storage from the home page like this:
var result = localStorage.getItem('umvToken')
console.log(result)
I get the following message:
[object Promise]
If I replace the setting of local storage with this:
localStorage.setItem('umvToken', 'test')
then the console.log will show test. But it doesn't work with the actual value. I'm not really sure how to resolve this?
Thanks for your help!

Answer 1

From first .then function in api call, return response.json(); or return response.text();. If you just return response, its a promise, which won't get resolved, unless you do response.json() or response.text(), depending on the type of response you are expecting.

Answer 2

I'm pretty sure token.text() returns a Promise, so you will need to wait for it to resolve to get the actual token string, i.e.
.then(function (token) {
return token.text();
})
.then(tokenText => {
localStorage.setItem('umvToken', tokenText);
})

Answer 3

Use the following code
.then(function (token) {
localStorage.setItem('umvToken', JSON.stringify(token))
return token
})