React/Redux на странице выдает undefined добавленный массив в объект?

Question

[DeniSidorenko]

Добрый день, есть такой код

export function fetchCategories() {
  return async dispatch => {
    dispatch(fetchCategoriesStart())
    try {
      const response = await axios.get('/api/category/categories')
      const categories = []
      categories.push(response.data.data)
      categories[0].forEach((category) => {
        axios.get('/api/product/findById/'+ category._id)
          .then(response => category.allProducts = response.data.products)

      })
      console.log(categories)
      dispatch(fetchCategoriesSuccess(categories))
    } catch (e) {
      dispatch(fetchCategoriesError(e))
    }
  }
}

При получении категории, делаю запрос по ИД категории и получаю массив продуктов, которые добавляю как массив к объекту Category. Однако когда в компоненте обращаюсь к state, allProducts нету. Не могу понять в чем причина

Comments

[Alex]

Почитайте правила оформления вопросов.

Answer 1

[Владимир]

Эта строка синхронная

const response = await axios.get('/api/category/categories')

Эта - нет

axios.get('/api/product/findById/'+ category._id)
          .then(response => category.allProducts = response.data.products)

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

Comments

[DeniSidorenko]

Спасибо, нет не знакомо ) Это мой первый проект на связке MERN) Да и первый в работе с react/redux

[Владимир]

DeniSidorenko,
1) Почитайте документацию, модифицировать существующий стор нельзя, п вот этот код

categories[0].forEach((category) => {
        axios.get('/api/product/findById/'+ category._id)
          .then(response => category.allProducts = response.data.products)

      })

модифицирует response который уже ушел в редюсер при помощи dispatch(fetchCategoriesSuccess(categories))
В зависимости от того как написан редюсер новая информауия или не войдет в стор, или вы попробуете модифицировать существующий

Вам нужно использовать map + await axios.get('/api/product/findById/'+ category._id) вместо forEach + then
Как вариант при помощи map собрать все axios.get('/api/product/findById/'+ в массив и при помощи Promise.All дождаться когда получите всю информацию, в цикле добавить ее в response и только потом делать dispatch

[DeniSidorenko]

Владимир, Спасибо большое Владимир

[Владимир]

DeniSidorenko,
Второй вариант на самом деле будет тяжело читаться.
Как вариант, чтобы ускорить отображение, можноосновную информауию диспатчить так как она сейчас доспаьчится, а для добавления allProducts написать отдельный редюсер и добавлять в стор allProducts вместо

.then(response => category.allProducts = response.data.products)

.then(response => dispatch(setAllProducts({id: category._id, allProducts: response.data.products})

З.Ы. клавиатура без русских букв, поэтому много опечаток.