Правильный способ реализации статьи и ее комментарии в реакции env

Question

Я реализую вид статьи в ответ на комментарии пользователей.Я задаюсь вопросом, должен ли я использовать избыточность и такие действия, как: FETCH_COMMENTS, EDIT_COMMENT и редукторы для обновления состояния (добавление комментария к сигналу в исходное состояние, полученное из wepabi и изменение комментария к сигналу, ищущегося по идентификатору) или просто простое использование fetch (post)в компоненте класса (без редукса) для добавления комментария, а затем просто выберите снова, чтобы получить новый массив комментариев от API - в этом случае я собираюсь перерисовать все комментарии вместо одного, но у пользователя будут новые комментарии после добавления его собственных, верно?

Что является лучшим решением для такой ситуации?Заранее спасибо.

Answer 1

Я изо всех сил пытаюсь отредактировать комментарий, вот что вы могли бы сделать:

После POST-комментария в БД я бы получил GET-запрос для обновления данных и отправил GET-запрос в действие.

Действие (это самый простой пример, вы можете обрабатывать загрузку и ошибки):

export const ActionGetAllComments = payload => ({
  type: GET_ALL_COMMENTS,
  payload
});



export const ActionPostComment = (URL_API_POST_COMMENT, URL_API_GET_COMMENTS) => {

  return dispatch => {
    axios.post(URL_API_POST_COMMENTS)
    .then(()=>axios.get(URL_API_GET_COMMENT))
    .then((response)=>response.data)
    .then(response => dispatch(ActionGetAllComments(response))  
  }
};

Как вы получите все комментарии в запросе GET, редуктор просто вернетвсе результаты без конкатенации необходимы, так как это перезапишет предыдущее состояние. Reducer :

export const ReducerGetAllComments = (state=[], action) => {
  switch (action.type) {
        case GET_ALL_COMMENTS:
                return action.payload
        default:
                return state;
  }
};

Вам необходимо добавить redux-thunk в ваш пакет и настроить его в своем магазине следующим образом:

import thunk from 'redux-thunk';
import { createStore, combineReducers, applyMiddleware } from 'redux'  

    export const Store = createStore(
      rootReducer,
      applyMiddleware(thunk)
    )

Если вам нужно настроить таргетингконкретные комментарии в зависимости от идентификатора пользователя, вы можете добавить аргумент идентификатора в ActionPostComment.Затем отправьте его своим запросам, создайте запросы по внутреннему маршруту и ​​отправьте обратно конечный результат с помощью запроса GET.

Answer 2

Я рекомендую вам axios (чтобы легко проверять ошибки выборки) в сочетании с асинхронным запросом через Redx Thunk, чтобы убедиться, что ваши данные будут показаны.

Redux Thunk довольно прост, он предназначен для включения запросав действии, и отправлять данные в других действиях.Типичными другими действиями являются «загрузка» и «ошибка», но вы можете пропустить их, если хотите.Вот пример одного из моих проектов:

export const ActionGetGroupListLoading = bool => ({
  type: GET_GROUP_LIST_LOADING,
  isLoading: bool
});

export const ActionGetGroupListSuccess = groupList => ({
  type: GET_GROUP_LIST_SUCCESS,
  groupList
});

export const ActionGetGroupListError = bool => ({
  type: GET_GROUP_LIST_ERROR,
  hasErrored: bool
});


export const ActionGetGroupList = url => {

  return dispatch => {
    dispatch(ActionGetGroupListLoading(true));
    axios.get(url)
      .then(response => response.data)
      .then(grouplist => dispatch(ActionGetGroupListLoading(false)) && dispatch(ActionGetGroupListSuccess(grouplist)))
      .catch(() => dispatch(ActionGetGroupListError(true)));
  }
};

Вы можете добавить несколько действий в действии ActionGetGroupList и скрестить данные внутри, как в этом примере:

export const ActionGetUserInfo = payload => ({
  type: GET_USER_INFO,
  payload
});

export const ActionLoadingUserInfo = bool => ({
  type: 'LOADING',
  isLoading: bool
});

export const ActionGetUserInfoAsync = (url, groupId, userId) => {

  return dispatch => {
    dispatch(ActionLoadingUserInfo(true));
    axios.post(url, {   
      groupId,
      userId,
    })
    .then(()=>fetch(`http://localhost/api/getuser/${userId}`))
    .then((response)=>response.json())
    .then(response => dispatch(ActionLoadingUserInfo(false)) && dispatch(ActionGetUserInfo(response)))
  }
};