【发布时间】:2019-11-23 12:11:49
【问题描述】:
我正在从后端获取数据并希望将其存储在状态中。 服务器将一些用户数据(id、mail、name、..)作为对象发送。我想将此对象存储为状态对象的属性。
这里是代码, 从 auth.js(动作文件)开始:
//loadUser(), which gets called via useEffect in App.js:
export const loadUser = () => async dispatch => {
try {
const token = await AsyncStorage.getItem('token')
await setToken(token)
const res = await axios.get(`${SERVER_IP}/api/auth`)
console.log('res.data', res.data) // see result of clog below
dispatch({
type: USER_LOADED,
payload: res.data
})
} catch (err) {
dispatch({
type: AUTH_ERROR
})
}
}
这是console.log('res.data', res.data) 的结果,它被传递给reducer。这也是我想要的:
Object {
"__v": 0,
"_id": "5d2b422322cdf413d4246566",
"avatar": "//www.gravatar.com/avatar/e14a77efcd408a95332f403e0db40b95?s=200&r=pg&d=mm",
"date": "2019-07-14T14:54:27.265Z",
"email": "awnwen@asdw.de",
"name": "awena",
}
这是减速器的样子:
// reducer:
import {
USER_LOADED,
AUTH_ERROR,
} from '../actions/types'
import {getToken, setToken, removeToken} from '../actions/auth'
const initialState = {
token: getToken(),
isAuthenticated: null,
loading: true,
user: null
}
export default async function (state = initialState, action) {
const { type, payload } = action
switch (type) {
case USER_LOADED:
return {
...state,
user: payload,
isAuthenticated: true,
loading: false
}
case AUTH_ERROR:
await removeToken()
return {
...state,
isAuthenticated: false,
token: null,
user: null,
loading: false
}
default:
return state
}
}
如果需要:来自 auth.js 操作文件的令牌函数(发布的第一个文件)
export const getToken = async () => {
try {
return await AsyncStorage.getItem('token')
} catch (error) {
console.log("Tokenerror: getToken() -" + error);
return null
}
}
export const setToken = async (token) => {
try {
await AsyncStorage.setItem('token', token);
setAuthToken(token)
} catch (error) {
console.log("Tokenerror: setToken() - " + error);
return null
}
}
export const removeToken = async () => {
try {
return await AsyncStorage.removeItem('token')
} catch (error) {
console.log("Tokenerror: removeToken() - " + error);
return null
}
}
我希望身份验证状态如下:
{
auth: {
token: 'randomstringofnumbersandletters',
isAuthenticated: true,
loading: false,
user: {
name: 'john',
email: 'jdoe@gmail.com',
.....
}
}
}
这是 RND 在身份验证状态下显示的内容:
{
auth: {
_40: 0,
_65: 0,
_55: null,
_72: null
}
}
这是我在 stackoverflow 上发布的第一个问题,它说我应该添加更多文本,因为文本与代码的比例太差了。如果您需要更多信息来帮助我解决这个问题,请随时提问。
非常感谢,伙计们;)
编辑1: 根据要求,我在 USER_LOADED 案例之后控制台记录了减速器中的有效负载。
switch (type) {
case USER_LOADED:
console.log('payload: ', payload)
return {
...state,
user: payload,
isAuthenticated: true,
loading: false
}
返回的是同一个对象:
payload: Object {
"__v": 0,
"_id": "5d2b422322cdf413d4246566",
"avatar": "//www.gravatar.com/avatar/e14a77efcd408a95332f403e0db40b95?s=200&r=pg&d=mm",
"date": "2019-07-14T14:54:27.265Z",
"email": "awnwen@asdw.de",
"name": "awena",
}
【问题讨论】:
-
你能告诉我们什么是 console.log(payload) 在这行 case USER_LOADED 之后打印你:
-
@mialnika 我已经用请求的信息编辑了帖子。它正在返回包含我想要进入身份验证状态的所有字段的对象。
标签: react-native redux state reducers asyncstorage