Редуктор и состояние хранилища не синхронизированы

Не могу понять, что здесь происходит, но в основном у меня есть файл json, в котором есть множество продуктов. я пытаюсь затем сделать те, которые я хочу

вот мой редуктор:

export default(state = initialState, action) => {
  switch(action.type){
    case Types.SHOW_PRODUCTS: {
      console.log('here1');
      let productsToShow = data.filter(category => category.link === action.category)
      const newState = [].concat(productsToShow[0].products)
      return newState;
    }
    default:
      console.log('here2');
      return state;
  }
}

когда я регистрирую состояние в своем магазине, оно говорит, что productsToRender - это массив длины 5 (это правильно)

однако, когда я регистрирую (this.props) в одном из своих компонентов, он говорит, что длина равна 0

в приведенном выше редюсере console.log('here 1') является последним вызываемым консольным журналом, что означает, что он определенно возвращает продукты (что проверяется в состоянии хранилища). так что я не уверен, почему он стирает его в этом компоненте?

в этом компоненте я называю это

  componentWillMount = () => {
    this.props.showProducts(this.props.chosenCategory.category)
  }

который проходит в выбранной категории, так что теперь я знаю, какие продукты отображать

однако регистрация this.props в методе рендеринга ниже показывает, что это пустой массив

конечно, я могу опубликовать больше кода, если это необходимо, но есть ли причина такого странного поведения?

дополнительная информация:

интересно, когда я делаю это:

    default:
      console.log('here2');
      return [{name: 'prod'}];
  }

а затем зарегистрируйте this.props, теперь он содержит этот массив с этим объектом???


reactjs javascript redux reducers
person Mr React    schedule 20.06.2018    source источник
comment
Здравствуйте, вы connect перенесли свой родительский компонент в Redux Store?   -  person t3__rry    schedule 20.06.2018
comment
Что произойдет, если вы поместите вызов в componentDidMount вместо этого?   -  person Winter    schedule 20.06.2018
comment
@Winter это то, что у меня изначально было, и я сделал то же самое   -  person Mr React    schedule 20.06.2018
comment
@t3__rrry да, я сделал так: экспортировать соединение по умолчанию (mapStateToProps, mapDispatchToProps) (Products);   -  person Mr React    schedule 20.06.2018
comment
Изначально это будет initialState, который в вашем случае может быть пустым массивом. Когда редьюсер запускается после вызова API, он заполняется данными. Кстати, что такое переменная «данные» в вашем редукторе?   -  person vijayst    schedule 20.06.2018
comment
@vijayst конечно. а зачем тогда его снова опорожнять? данные - это просто мой файл json, который я загружаю. или массив всех продуктов   -  person Mr React    schedule 20.06.2018
comment
хорошо, я очень запутался, я только что удалил все и попытался вернуть <h1> Hi </h1>, и это не отобразится???   -  person Mr React    schedule 20.06.2018
comment
хорошо, теперь, закомментировав `componentWillMount', он теперь что-то отображает, так что по какой-то причине это сломало всю страницу ??   -  person Mr React    schedule 20.06.2018
comment
был бы очень признателен за любую помощь @Winter и др. не уверен, почему вызов метода не отображает компонент И почему он не работает в редукторе...   -  person Mr React    schedule 20.06.2018
comment
переверните меня, решил это в конце концов. это было весело. проблема была в другом редукторе   -  person Mr React    schedule 20.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Хранилище должно быть неизменяемым, то есть возвращаемое вами значение должно быть сделано неизменным. Я предполагаю, что вы добавляете только один массив в хранилище. Попробуйте изменить редуктор, например,

const initialState = [];

export default(state = initialState, action) => {
  switch(action.type){
    case Types.SHOW_PRODUCTS: {
      console.log('here1');
      let productsToShow = data.filter(category => category.link === action.category)
      let newState = [...state,...productsToShow[0].products]
      return newState;
    }
    default:
      console.log('here2');
      return state;
  }
}
person Rohith Murali    schedule 20.06.2018
comment
Хорошо, вы пробовали этот метод?? - person Rohith Murali; 20.06.2018