Правильный способ слить новые реквизиты в штат - PullRequest
Новая
       62

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

0 голосов
/ 18 мая 2019

В настоящее время я работаю над компонентом календаря, используя Reaction-Big-Calendar.

В настоящее время у меня есть один Wrapper для него, который извлекает данные из базы данных и отправляет их в компонент календаря. Однако я создаю функцию, позволяющую «отправлять» события календаря на этот компонент из любого места.

В настоящее время у меня есть только варианты использования, которые взяты из встроенной в систему уведомлений веб-сайта, будет возможность добавить внешнее событие, отправленное как уведомление, в ваш собственный календарь. Однако, возможно, я захочу отправить события в календари пользователей из другого веб-приложения через мой сокет-сервер (socket.io).

Я не уверен, каков «правильный» способ реагировать технически.

Теперь я добавил, что добавил 

 static getDerivedStateFromProps(nextProps, prevState){
    if(nextProps.propInput === true){
        nextProps.reset()
        return {events : {...prevState.events, ...nextProps.events}}
    } else return null
}

внутри моего CalendarWrapper, который в основном делает для меня следующее: 1) Я обновляю реквизиты, отправленные в обертку, либо из родительского компонента, либо из магазина приставок (я буду использовать 2-й) 2) Это вызывает getDrivedStateFromProps и проверяет, получает ли он значение propInput как true, и, если это так, объединяет новые события, отправляемые в качестве реквизитов, в текущие события календаря. 3) затем он запускает функцию обратного вызова (nextProps.reset ()), чтобы сбросить propInput в FALSE, который запускает еще один запуск getDrivedStateFromProps, но на этот раз возвращает ноль и не вызывает новый setState.

Это было мое собственное придуманное решение о том, КАК отправлять новые события в эту оболочку календаря из избыточного хранилища. Это кажется неортодоксальным, но для меня это единственный способ получить золотую середину с чистым редуксом и всем, что сохранено в редуксе, и с локальным состоянием каждого компонента.

Существует ли технически лучший и более совершенный способ решения этой проблемы?

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 18 мая 2019

Я бы сохранил метку времени (вместо логического propInput) с новыми событиями, отправляемыми в redux. Сравнение «времени последнего обновления» достаточно для принятия решения об обновлении - нет необходимости сбрасывать флаг propInput (нет reset() вызов ... редукторы ... и т. Д.).

Вам даже не нужно хранить эту метку времени в состоянии - нет необходимости использовать getDerivedStateFromProps ( "при каждом рендере, независимо от причины" ) - классическое решение: 

componentDidUpdate(prevProps) {
  if (this.props.newEventsTime !== prevProps.newEventsTime) {
    setState({events : {...this.state.events, ...this.props.newEvents}})
  }
}

Более оптимальным должно быть 

shouldComponentUpdate(nextProps, nextState) {
  if (nextProps.newEventsTime !== this.props.newEventsTime) {
    setState({events : {...this.state.events, ...this.props.newEvents}});
    return false; // no render needed in this pass
  }
  return (nextState.events === this.state.events) ? false : true;
}

- обновить events изменение ссылки на объект.

0 голосов
/ 18 мая 2019

Вы должны вернуть слияние вашего прежнего состояния с вашим новым состоянием, например: 

static getDerivedStateFromProps(nextProps, prevState){
if(nextProps.propInput === true){
    nextProps.reset()

    return {...prevState, ...{ 
               events : nextProps.events
           }
    }
} else return null
}
...