【问题标题】:RN & Redux: Unable to put an object into state in the reducerRN & Redux:无法将对象放入减速器中的状态
【发布时间】: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


【解决方案1】:

这个问题可以通过去掉“async”来解决

export default async function (state = initialState, action) {...}

在减速器中。

现在我让用户处于状态。

但是auth状态的token不是字符串而是对象/Promise。 这是我在身份验证状态对象中记录令牌属性得到的结果:

state.token Promise {
"_40": 0,
"_55": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNWQyYjc2MzRmN2U1MjcwOGUwNjNmZThmIn0sImlhdCI6MTU2MzEyOTM5NiwiZXhwIjoxODYzMTI5Mzk2fQ.YQayK3HBXIFl6aFSfkojTF8WrZkxXCGMf36Z0rXvRjY",
"_65": 1,
"_72": null,
 }

我对承诺不是很有经验。有没有办法在我的状态下只将令牌的值存储为字符串?

我可以构建丑陋的解决方法,并使用 _55 提取键的值。 但一方面我不明白承诺中的那些关键是什么,我可以想象从一个客户更改为另一个客户的关键。

【讨论】:

    猜你喜欢
    • 2016-04-23
    • 1970-01-01
    • 2016-10-20
    • 2016-11-24
    • 1970-01-01
    • 1970-01-01
    • 2018-09-12
    • 1970-01-01
    • 2017-06-14
    相关资源
    最近更新 更多