How to set a loading in component with Redux when call API

Question

Preface: I'm new to react.

I'm creating a project based on React, Redux.

I want to set a loading status when I press the register button on the register component.

I did a lot of research for a possible solution, but wasn't able to find anything useful for my situation.

What's the best way to fix this?

Register reducer

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;

Register action

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);
                }
            })
    }
}

Register.js component

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

Mateo Kruk · Accepted Answer · 2020-02-11 17:53:52Z

I think you only need 3 reducers to be honest, FETCH_USERS_INIT, FETCH_USERS_SUCCESS and FETCH_USERS_FAIL.

Register reducer

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  */
      });
  };
};

The action is not finished but i think it's clear how to finish it. Let me know if you have any doubt.

Collectives™ on Stack Overflow

How to set a loading in component with Redux when call API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related