состояние загрузки никогда не выполняется ?? (React - Redux) - PullRequest
Новая
       7

состояние загрузки никогда не выполняется ?? (React - Redux)

2 голосов
/ 04 августа 2020

Я создаю приложение, которое получает данные пользователя из бэкэнда при входе пользователя в систему и отображает его в профиле пользователя, мне нужно установить оператор загрузки, например loading..., вместо профиля, прежде чем все данные будут поступать из бэкэнда. затем отобразите данные вместо этого

создатели моих действий: 

export const loginUser = (loginData) => (dispatch) => {

    axios.post('/signin', loginData)
        .then(res => {
            let FBIdToken = `Bearer ${token}`;
            localStorage.setItem('FBIdToken', FBIdToken);
            dispatch(getUserData());
        })
        .catch(err => {
            dispatch({
                type: SET_ERRORS,
                payload: err.response && err.response.data
            });
        });
}

export const getUserData = () => dispatch => {
    dispatch({ type: LOADING_USER });

    axios.get('/user')
        .then(res => {
            dispatch({
                type: SET_USER,
                payload: res.data
            })
        })
        .catch(err => console.log(err))
}

reducer: 

const intialState = {
    authenticated: false,
    loading: false,
    credentials: {},
};

export default (state = intialState, action) => {
    switch (action.type) {
        case SET_USER:
            return {
                authenticated: true,
                loading: false,
                ...action.payload,
            }
            case LOADING_USER:
                return {
                    loading: true,
                    ...state
                }

        default:
            return state;
    }
};

страница входа: 

    const handleSubmit = (e) => {  
        e.preventDefault();
        loginUser(loginData);
    }

теперь, когда я нажмите кнопку отправки на странице входа. handlesubmit функция запускает loginUser создателя действия, который в роли запускает getUserData создателя действия.

теперь в создателе действия getUserData это действие отправляется {type: LOADING_USER} и это состояние должен быть возвращен редуктором до того, как userData поступит из бэкэнда: 

{
  loading: true,
  credentials: {},
  authenticated: false
}

, а затем данные поступят после запроса ax ios и измените loading на false и установите учетные данные пользователя, но это не тот сценарий в моем случае, поскольку загрузка никогда не выполняется в моем коде, и loading... никогда не отображается до того, как учетные данные пользователя установлены в качестве профиля пользователя .. что не так в моем код?

Ответы [ 2 ]

2 голосов
/ 04 августа 2020

вы распространяете предыдущее состояние после вашего текущего обновленного состояния: 

case LOADING_USER:
  return {
    loading: true,
    ...state
  }

вам нужно сделать обратное: 

case LOADING_USER:
   return {
     ...state,
     loading: true,              
   }

путем распространения состояния после загрузки, вашего предыдущего состояния got переопределяет новое состояние, но, сначала распространяя предыдущее состояние, вы переопределяете только загрузочную часть своего состояния!

2 голосов
/ 04 августа 2020

Как я уже упоминал в комментарии выше, вам нужно изменить порядок loading: true и ...state.

Причина: (как вы уже догадались) порядок имеет значение, когда вы распространяете объект, особенно, если распространяемый объект также содержит внутри себя ключ loading. Поэтому, если вы оставите ...state после loading: true, он заменит loading: true любым значением state для loading. И я думаю, это не то, чего мы хотели бы. Следовательно, оставьте ...state перед loading: true, чтобы получить ожидаемый результат.

...