Redux Dom не освежает - PullRequest
Новая
       8

Redux Dom не освежает

0 голосов
/ 28 июня 2018

Я обновляю свое избыточное состояние, и состояние, похоже, не видоизменяется, однако DOM все еще не обновляется. 

//update filters for events
setFilters = (name) => async () => {
const {onSetActiveEventTypes, authUser} = this.props;

let array = this.props.activeEventTypes
let index = array.indexOf(name);

if (index > -1) {
  array.splice(index, 1);
}else {
  array.push(name)
}

await Promise.resolve(onSetActiveEventTypes(array));
}


render() {
return <Accordion title="Filters" collapsed>
      {
        (this.props.eventTypes && this.props.activeEventTypes ?
          <EventFilter eventTypes={this.props.eventTypes} activeEventTypes={this.props.activeEventTypes} action={this.setFilters}/>
         : '')
      }
    </Accordion>
}

const mapStateToProps = (state) => ({
eventTypes: state.eventsState.eventTypes,
activeEventTypes: state.eventsState.activeEventTypes
});

const mapDispatchToProps = (dispatch) => ({
onSetEventTypes: (eventTypes) => dispatch({ type: 'EVENT_TYPES_SET', 
eventTypes }),
onSetActiveEventTypes: (activeEventTypes) => dispatch({ type: 
'ACTIVE_EVENT_TYPES_SET', activeEventTypes })
});

const authCondition = (authUser) => !!authUser;

export default compose(
withAuthorization(authCondition),
connect(mapStateToProps, mapDispatchToProps)
)(DashboardPage);

Я поместил свой код в мой компонент выше, это должно быть все, что нужно для отладки. Я поставлю редуктор ниже 

const applySetEventTypes = (state, action) => ({
...state,
eventTypes: action.eventTypes
});

const applySetActiveEventTypes = (state, action) => ({
...state,
activeEventTypes: action.activeEventTypes
});

function eventsReducer(state = INITIAL_STATE, action) {
switch(action.type) {
case 'EVENT_TYPES_SET' : {
  return applySetEventTypes(state, action);
}
case 'ACTIVE_EVENT_TYPES_SET' : {
  return applySetActiveEventTypes(state, action);
}
default : return state;
}
}

export default eventsReducer;

Выше приведен мой редуктор, я думаю, что я придерживаюсь правильных шаблонов для управления состоянием редукции и поддержания неизменности. Чего мне не хватает?

setFilters - это метод, который флажки используют для обновления активных фильтров по сравнению со всеми доступными фильтрами.

Ответы [ 2 ]

0 голосов
/ 28 июня 2018 
//update filters for events
setFilters = (name) => async () => {
const {onSetActiveEventTypes, authUser} = this.props;

let array = []
this.props.activeEventTypes.map((type) =>{
  array.push(type)
})

let index = array.indexOf(name);

if (index > -1) {
  array.splice(index, 1);
}else {
  array.push(name)
}

//use this once server sending active filters
// await eventTable.oncePostActiveEventTypes(authUser.email, array).then( data 
=> {
//   Promise.resolve(onSetActiveEventTypes(data));
// })
await Promise.resolve(onSetActiveEventTypes(array));
}
0 голосов
/ 28 июня 2018

Вы определенно мутирующее состояние: 

const {onSetActiveEventTypes, authUser} = this.props;

let array = this.props.activeEventTypes
let index = array.indexOf(name);

if (index > -1) {
  array.splice(index, 1);
}else {
  array.push(name)
}

Это изменяет существующий массив, полученный из состояния, и затем вы отправляете действие, которое возвращает тот же массив обратно в это состояние. Итак, вы оба: A) постоянно используете один и тот же массив и B) каждый раз изменяете этот массив.

Подходы, описанные на странице Шаблоны неизменных обновлений в документах Redux, применяются везде, где вы создаете новые значения состояний, независимо от того, генерируете ли вы новое состояние в редукторе на основе пары небольших значений, или перед отправкой действия.

...