Как установить загрузку в компоненте с Redux при вызове API

Question

Предисловие: я новичок в реакции.

Я создаю проект на основе React, Redux.

Я хочу установить статус загрузки, когда нажимаю register Кнопка на register component.

Я провел много исследований для возможного решения, но не смог найти ничего полезного для моей ситуации.

Какой лучший способ исправить это ?

Редуктор регистра

const initialState = {
    pending: false,
    users: [],
    error: null,
    showModal: false,
    loading: false
}

export function userReducer(state = initialState, action) {
    switch (action.type) {
        case 'TOGGLE_LOADING': return {
            ...state,
            loading: !state.loading
        }
        case 'USER_ADD':
            {
                debugger;
                state.users = state.users.concat(action.payload);
                return {
                    ...state,
                    loading: false,
                    users: state.users
                }
            }
        case FETCH_USERS_PENDING:
            return {
                ...state,
                pending: true,
                loading: false
            }
        case FETCH_USERS_SUCCESS:
            return {
                ...state,
                pending: false,
                loading: false,
                users: action.payload
            }
        case FETCH_USERS_ERROR:
            return {
                ...state,
                pending: false,
                loading: false,
                error: action.error
            }
        default:
            return state;
    }
}
export default userReducer;

Действие регистра

export const userRegisterFetch = user => {
    user.Username = user.Mobile;
    return dispatch => {
        dispatch({ type: 'TOGGLE_LOAD' })
        return fetch(`${baseUrl}/users/Register`,
            {
                method: 'POST', body: JSON.stringify(user), headers: {
                    'Content-Type': 'application/json',
                }
            }
        )
            .then(resp => resp.json())
            .then(data => {
                if (data.result == undefined) {
                    return alert('error');
                }
                if (!data.result) {
                    alert(data.message);
                }
                else {
                    const location = {
                        pathname: '/Users/Confirm',
                        state: { mobile: user.Mobile }
                    }
                    history.push(location);
                }
            })
    }
}

Регистрация. js компонент

const { loading } = this.props
return(
{loading ? <Loading /> :
           <Form>
               ...my form
           </Form>
 }
)

Answer 1

Я думаю, что вам нужно только 3 редуктора, чтобы быть честным, FETCH_USERS_INIT, FETCH_USERS_SUCCESS и FETCH_USERS_FAIL.

Зарегистрируйте редуктор

const initialState = {
  users: [],
  loading: false,
  error: null
};

function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_USERS_INIT':
      return {
        ...state,
        loading: true
      };
    case 'FETCH_USERS_SUCCESS':
      return {
        ...state,
        loading: false,
        error: null,
        users: action.payload.users
      };
    case 'FETCH_USERS_FAIL':
      return {
        ...state,
        loading: false,
        error: action.payload.error
      };
    default:
      return initialState;
  }
}

export default userReducer;

export const userRegisterFetch = user => {
  user.Username = user.Mobile;
  return async dispatch => {
    dispatch({ type: 'FETCH_USERS_INIT' });
      fetch(`${baseUrl}/users/Register`, {
        method: 'POST',
        body: JSON.stringify(user),
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(response => {
          /* dispatch 'FETCH_USERS_SUCCESS' with the list of users */
      }).catch(error => {
          /* dispatch 'FETCH_USERS_FAIL' with the corresponding error  */
      });
  };
};

Действие еще не завершено, но я думаю, что это понятно как фини sh это. Дайте мне знать, если у вас есть какие-либо сомнения.