3

私の減速機:

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 では、2 番目の useEffect が呼び出された後、状態が更新され、ユーザーが promise を返します。promise には複数のプロパティがあり、そのうちの 1 つに、返されるはずだった正しい状態があります。状態を返すべきではありませんか?私は何か間違ったことをしていますか?

手短に:

1) アプリ起動

2) useEffect が初めて呼び出され、正しい初期状態になっている

3) 状態を更新する LOAD アクションを呼び出します

4) useEffect が 2 回目に呼び出されます。今回は promise を返しますが、ストアの更新された状態のみを返す必要があるのではないでしょうか?

コンソール

4

2 に答える 2