Redux Middleware, POST-запрос

Question

Я написал функции для отправки запросов, используя redux api middleware. Как выглядит функция POST вместо GET?

RSAA getOrdersRequest(){
  return RSAA(
    method: 'GET',
    endpoint: 'http://10.0.2.2:80/order',
    types: [
      LIST_ORDERS_REQUEST,
      LIST_ORDERS_SUCCESS,
      LIST_ORDERS_FAILURE,
    ],
    headers: {
      'Content-Type':'application/json',
    },
  );
}

ThunkAction<AppState> getOrders() => (Store<AppState> store) => store.dispatch(getOrdersRequest());

моя функция написана в dart, но язык примера не важен,

спасибо за любую помощь

Answer 1

Для совершения асинхронных вызовов c вы должны использовать промежуточное программное обеспечение, например redux-thunk. Я буду использовать JavaScript здесь.

Все, что вам нужно знать о thunk, это то, что redux-thunk позволяет вашему создателю действия (например, postOrder) возвращать функцию, которая затем отправляет соответствующие действия (объект с type и payload/data собственность) в магазин. Вы можете отправить столько действий, сколько захотите.

POST - это всего лишь глагол HTTP, который я использую для размещения заказа, как вы могли видеть здесь. Во-первых, POST_ORDERS_REQUEST - это начало вашего запроса, в котором вы можете показать состояние загрузки ... или спиннер в вашем приложении. Таким образом, это действие запускается, orderReducer проверяет, какое type действие пришло, и, в свою очередь, действует согласованно и сохраняет данные в хранилище резервов. Я уверен, что вы знаете basi c redux, так что вам не составит труда понять все это. Два других действия работают одинаково.

export const postOrder = () => {
  return async (dispatch) => {
    dispatch({
      type: POST_ORDER_REQUEST
    })
    try {
      const res = await axios.post("http://10.0.2.2:80/order",
        {
          headers: {
            "Content-Type": "application/json",
          }
        })
      dispatch({
        type: POST_ORDER_SUCCESS,
        data: { order: res.data.order }
      })
    } catch (err) {
      dispatch({
        type: POST_ORDER_FAILURE,
        data: { error: `Order failed with an ${err}` }
      })
    }
  }
}

Соответственно, вы можете создать свой orderReducer, например:

const initialState = {
  isLoading: false,
  myOrder: null,
  error: null
}

export const orderReducer = (state = initialState, action) => {
  switch (action.type) {
    case POST_ORDER_REQUEST:
      return {
        ...state,
        isLoading: true,
        error: null
      }
    case POST_ORDER_SUCCESS:
      return {
        ...state,
        isLoading: false,
        myOrder: action.data.order,
        error: null
      }
    case POST_ORDER_FAILURE:
      return {
        ...state,
        isLoading: false,
        error: action.error
      }
    default:
      return state
  }
}

Вы можете прочитать эти хорошие статьи о Redux, которые вы могли бы как:

https://daveceddia.com/what-is-a-thunk/

https://daveceddia.com/where-fetch-data-redux/