Получить снова или установить состояние? - реагируй, редуцируй

Question

Это вопрос, который всегда смущает меня, поэтому я решил, что задаю вам. Я имею в виду, что у меня есть Node-сервер, база данных SQL в бэкэнде и хранилище с избыточностью на внешнем интерфейсе. Основной компонент выбирает каждый раз, когда он монтирует, обрабатывает ответ и отправляет его в хранилище. Все что видит пользователь в зависимости от магазина. Таким образом, если изменение происходит, оно загружается в базу данных через сервер, но если это изменение происходит в дочернем компоненте основного компонента, состояние не загружается в хранилище, поскольку основной компонент не выполняет монтирование. Позвольте мне показать, что я имею в виду:

//main component

componentDidMount(){
  fetch('http://localhost:3001/')
      .then(res => res.json())
      .then(items => {
        //items: [1, 2, 3]
        this.props.dispatch({
          type: 'GET_ITEMS',
          items
        });
      })
      .catch(err => console.log(err)))
}

//reducer

const initialState = {
  items: []
}
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'GET_ITEMS' :
      return{
        ...state,
        items: action.items
      }
    default:
      return state
  }
};

//child component

userAddsNewElement = e => {
    fetch('http://localhost:3001/addElement', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        newElement: e.target.value //4
      })
    })
    //here, we have a few options:
    //we can send the whole `items` array as response from the server
      //and dispatch it as in componentDidMount
    //we can push the new element to the current state
    .catch(err => console.log(err)))
}

Приведенный выше код просто иллюстрация того, что я имею в виду. Очевидно, что второе решение выглядит лучше, но в состоянии моего кода мне нужно перебрать 3 массива, чтобы найти целевой элемент. Но количество предметов неизвестно как в базе данных, так и в состоянии. Если я получаю элементы из базы данных, она обрабатывается двумя картами, а затем сортируется. Если я хочу выполнить поиск целевого элемента, как я уже говорил, мне нужно сделать 3 вложенных цикла, чтобы найти целевой элемент.

Я знаю, что нет «золотого ответа» на этот вопрос, но я хочу знать, когда использовать какой. Существуют ли большие различия между этими методами (в производительности)?

Answer 1

что вы, вероятно, захотите сделать, это что-то вроде этого:

Ваше состояние бэкэнда и ваше состояние внешнего интерфейса должны быть согласованными, но вам НЕ НУЖНО запрашивать у бэкэнда, чтобы это состояние было одинаковым. просто внесите изменения в свой магазин по мере необходимости после выполнения внутренних запросов. Ваш GET_ALL должен запускаться только один раз при монтировании компонента, что затем установит начальное состояние ваших магазинов. После этого вы будете вносить изменения непосредственно в магазин и напрямую в бэкэнд.

componentDidMount(){
  fetch('http://localhost:3001/')
      .then(res => res.json())
      .then(items => {
        //items: [1, 2, 3]
        this.props.dispatch({
          type: 'SET_ITEMS', // you'll need to set your reducer up for this
          items
        });
      })
      .catch(err => console.log(err)))
}

// дочерний компонент

userAddsNewElement = e => {
    fetch('http://localhost:3001/addElement', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        newElement: e.target.value //4
      })
    })
    //here, we have a few options:
    //we can send the whole `items` array as response from the server
      //and dispatch it as in componentDidMount
    //we can push the new element to the current state ** this one **
    .then(() => { // if were here that means our post request didnt throw an error
      this.props.dispatch({
        type: 'ADD_ITEM',
        payload: e.target.value
      });
     })
    .catch(err => console.log(err)))
}

а затем в вашем редукторе:

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'GET_ITEMS' : // not using this anymore but you may for things later.
        return state.items
    case 'ADD_ITEM' :
      return {
       ...state,
       state.items.concat(action.payload)
      }
    case 'SET_ITEMS' :
      return{
        ...state,
        items: action.items
      }
    default:
      return state
  }
};