RN&Redux:无法在简化器中将对象置于状态

时间:2019-07-14 15:30:26

标签: react-native redux state reducers asyncstorage

我正在从后端获取数据,并希望将其存储在状态中。 服务器发送一些用户数据(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上发布的第一个问题,它说我应该添加更多文本,因为文本与代码的比率太差了。如果您需要更多信息来帮助我解决此问题,请随时提问。

在此先感谢大家,)

EDIT1: 根据要求,控制台在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",
 }

1 个答案:

答案 0 :(得分:0)

可以通过从

删除“异步”来解决问题
document.execCommand

在减速器中。

现在我让用户处于状态。

但是处于auth状态的令牌不是字符串,而是对象/承诺。 这是从在身份验证状态对象中记录令牌属性得到的:

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

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

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