useReducer 返回一个承诺而不是更新的状态

Question

我的减速机：

export const initialUserState = {
    username: '',
    address: '',
    token: '',
    address: '',
    loggedIn: false,
    loaded: false,
};

export const userReducer = async (state, action) => {
    try {
        switch (action.type) {
            case 'LOAD':
                try {
                    const value = JSON.parse(await AsyncStorage.getItem('user_info'));
                    const newState = { ...state, ...value, loggedIn: true, loaded: true };
                    console.log('New State:', newState);

                    if (value !== null) {
                        return newState;
                    }
                } catch (error) {
                    return { ...state, loaded: true };
                }
                break;
            default:
                return state;
        }
    } catch (error) {
        console.log(error);
        return state;
    }
};

我的App.js:

import { userReducer, initialUserState } from './reducer';

const App = () => {
    const [user, dispatch] = useReducer(userReducer, initialUserState);

    useEffect(() => {
        dispatch({ type: 'LOAD', ready: setReady });
    }, []);

    useEffect(() => {
        console.log('state user:', user);
    }, [user]);
}

export default App;

发生的事情是，在 App.js 中，在调用第二个 useEffect 之后，状态更新并且 user return 是一个承诺。 promise 有多个属性，其中之一是它应该 return 的正确状态。它不应该 return 状态吗？我做错了什么吗？

简而言之：

1) 应用启动

2) useEffect 第一次调用并有正确的初始状态

3) 我调用了将更新状态的 LOAD 操作

4) useEffect 被第二次调用。这次 return 是一个承诺，它应该 return 只有商店的更新状态，我猜？

Answer 1

看起来你传递给useReducer的函数是async。所有 async 函数 return 一个承诺。您需要 await 或使用 .then 语法从承诺中获取值。这不是第一次通过的承诺，因为它是 return 的初始状态。希望对您有所帮助！

Answer 2

它 return 是一个承诺，因为减速器是一个异步函数，这是因为等待调用 AsyncStorage:

const value = JSON.parse(await AsyncStorage.getItem('user_info'));

您应该将存储提取移动到效果挂钩中，然后 dispatch resolved/rejected 承诺的结果。

移动数据提取的另一个原因是 reducers 应该是 pure functions（这是一个 link 是针对 Redux 文档的，但这个想法仍然适用于 React reducers）。 reducer 应该拥有的唯一数据源是它的 state 和 action 参数。这允许关于这些参数的确定性行为；给定相同的参数，单独的 reducer 调用应该总是 return 相同的结果。

useReducer 返回一个承诺而不是更新的状态

useReducer returning a promise instead of the updated state

javascript

reactjs

react-hooks

use-reducer