Redux -> Как я могу сохранить несколько объектов в одном хранилище?

#reactjs #redux

Вопрос:

Итак, у меня есть приложение, которое всякий раз, когда я нажимаю кнопку, добавляет объекты в хранилище redux, дело в том, что всякий раз, когда я нажимаю эту кнопку, хранилище на самом деле не содержит добавленные мной элементы, а просто заменяет их, как я могу сделать так, чтобы при нажатии кнопкион сохраняет объект внутри него, затем при втором щелчке добавляет следующий объект и так далее. Вот мой код: вот где моя кнопка:

 {item.map(product => (
  <div>
    <h1>{product.name}</h1>
    <h2>{product.Price}</h2>
    <button onClick={() => buyProduct(product)}>
      Buy
    </button> 
  </div>
)}

Вот где моя функция buyProduct:

 const buyProduct = (item) => {
  store.dispatch({type:"buy", payload: item})
}

И это весь мой код redux:

 const reducer = (state, action) => {
  if (action.type === 'buy') {
    return action.payload;
  } else if (action.type === 'Decrease') {
    return action.payload
  }
  
  return state;
}

const store = createStore(reducer, 0)

store.subscribe(()=>{
  console.log('Store is now: ', store.getState())
})

const buyProduct = (item) => {
  store.dispatch({type:"buy", payload: item})
}

Как я могу также сделать так, чтобы я мог перебирать сохраненные объекты хранилища

1. Каково начальное состояние, действие и ожидаемое новое состояние после отправки действия?

2. ну, по умолчанию я считаю, что оно не определено, поэтому всякий раз, когда я нажимаю эту кнопку, он добавляет объект item в хранилище, что выполняется в созданной мной функции map, и она в основном повторяет следующий stateHook: const [item]=useState([{name:'Blue',Price:540},{name: 'Red',Price: 600}]) дело в том, что всякий раз, когда я регистрирую его в консоли после нажатия кнопки, он показывает толькопоследний экземпляр продуктов в item, но я хочу, чтобы он показывал все экземпляры, которые были созданы, когда я нажал на кнопку

Ответ №1:

в редукторе вы должны добавить новые данные к текущим данным. если ваши данные корзины представляют собой массив объектов, вы должны поместить новый объект product в массив. например :

 if(action.type==='buy')
{
    return {...state, cartArray: [...state.cartArray, action.payload] };
}

и та же логика в Decrease действии.

1. Я определенно вижу здесь логику, но ...state.cartArray выдает ошибку, утверждающую, что она не повторяется. Почему это так?

2. это означает, что это не массив или объект .. если вы можете показать свой код начального состояния, это может помочь вам

3. Здесь я храню свои продукты: const [item]=useState([{name: 'Blue',Price: 540},{name: 'Red',Price: 600}]) Извините за мою глупость, я только начал изучать redux

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