Question

我实现了异步减速器，并试图返回异步存储值，但是当我调用调度程序时，它会在控制台中打印值，但不更新初始状态。

userReducer.js：

import {AsyncStorage} from "react-native";

const initialState = {
    fullname: null
}
const userReducer = async (state = initialState, action) => {
    switch (action.type) {
        case 'GET_USERNAME':
            const uname= await AsyncStorage.getItem('@uinfo:name', '')
            console.log('uname: '+uname)
            return { fullname: uname}
    }
    return state
}

export default userReducer;

在上面的控制台中，打印用户名，但不设置状态。

我试图在componentDidMount中设置分派：

async componentDidMount() {

        const uname= await this.props.getNAME()
        console.log('uname: '+ this.props.fullname)
    }

console.log（'uname：'+ this.props.fullname）返回未定义

我的mapDispatchToProps：

function mapDispatchToProps(dispatch) {
    return {
        getNAME: () => dispatch({ type: 'GET_UNAME' })
    }
}

我是否缺少某些东西，为什么状态没有设置

Answer 1

全名是状态中的一个元素，因为您将initialState分配给state，所以您可以像这样访问全名。

import {AsyncStorage} from "react-native";

const initialState = {
    fullname: null
}
const userReducer = async (state = initialState, action) => {
    switch (action.type) {
        case 'GET_USERNAME':
            const uname= await AsyncStorage.getItem('@uinfo:name', '')
            console.log('uname: '+uname)
            state.fullname = uname;
            return { ...state }
    }
    return state
}

export default userReducer;

Answer 2

AsyncStorage.getItem()返回Promise，因此语句return { fullname: uname}在await语句之前运行，一旦执行return语句，该函数将退出。您可以试试看

AsyncStorage.getItem('@uinfo:name', '').then(res=>{
  if(res)
  return { 
...state,
fullname: uname }
})

Answer 3

也许您使用的方式错误，

actions不返回任何内容。

您需要在连接中使用mapStateToProps配置将状态映射到道具。

const mapStateToProps = ({
  userReducer
}) =>{
const {fullname} = userReducer;
return fullname;
}

为此提供连接，

 export default connect(
  mapStateToProps,
  mapDispatchToProps
)(YouClass);

您可以使用this.props.fullname访问数据。

当reducer返回数据时，会触发

cmponentDidUpdate和componentWillReceiveProps。

注意：您已经从减速器返回了数据

return { fullname: uname} // never do this, because you will lost all other data/variables other than fullname.

相反，这样做

return { ...state,fullname: uname} //this will not do anything to other variables

反应本机Redux AsyncStorage返回Null

3 个答案: