Saya telah menerapkan keranjang belanja menggunakan redux, saya telah menggunakan kamus sebagai objek negara (ID produk menjadi kunci dan kuantitas dalam gerobak menjadi nilainya). Ini adalah bagaimana cart.js saya terlihat seperti:

import React from 'react';
import ReactDOM from 'react-dom';

export const AddItemToCart = (productID) => {
    return {
        type: 'ADDITEMTOCART',
        productID
    }
}
export const DeleteItemFromCart = (productID) => {
    return {
        type: 'DELETEITEMFROMCART',
        productID
    }
}
export const Counter = (state = {}, action) => {
    switch (action.type) {
        case 'ADDITEMTOCART':
            console.log(action);
            return {
              ...state,
              [action.productID]: ( state[action.productID] || 0 ) + 1
            }
        case 'DELETEITEMFROMCART':
            return {
              ...state,
              [action.productID]: ( state[action.productID] || 1 ) - 1
            }
    }
  }

Saya menambahkan item dari App.js seperti ini:

return products.map(products =>
      <div key={products.ProductID}>
        <h2>{products.ProductName}</h2>
        <h2>{products.ProductDescription}</h2>
        <h2>{products.ProductQuantity} units available</h2>
        
        <button onClick={() => { store.subscribe(() => console.log(store.getState()));
      store.dispatch(AddItemToCart(products.ProductID));}}>Add to cart</button>
        </div>

Semuanya berfungsi dengan baik tetapi masalahnya adalah, saya tidak dapat membuat konten gerobak untuk dilihat pengguna. Saya telah mencoba:

function ShowCartContents() {
  var items = Object.keys(store.getState()).map(function(key){
    return store.getState()[key];
});
  return (
    <div>
        <h2>{items}</h2>
      </div>
  );
}

Fungsi ini melempar pengecualian saat dipanggil:

TypeError: Cannot convert undefined or null to object

Jelas toko itu sendiri bukan nol atau tidak terdefinisi, karena perubahan keadaan berhasil dicetak ke konsol browser. Jadi, bagaimana saya akan mengakses semua nilai dalam kamus tanpa kunci? Dan bagaimana saya akan mengakses satu nilai spesifik dengan kunci? Saran apa pun akan sangat dihargai. Terima kasih.

0
Mr. Engineer 3 April 2021, 15:18

1 menjawab

Jawaban Terbaik

Counter reducer tidak memiliki default case, jadi state Anda akan undefined pada render pertama.

Itulah sumber kesalahan Anda "TypeError: tidak dapat mengubah objek yang tidak ditentukan atau nol ke objek".

Anda perlu mengembalikan keadaan yang ada ketika tidak ada yang cocok. Setiap reducer membutuhkan default case karena mereka akan dipanggil dengan tindakan seperti tindakan {type: '@@redux/INIT'} yang digunakan untuk menginisialisasi toko.

default:
  return state;

Anda mencoba mengakses toko secara langsung dengan store.subscribe(), store.getState() dan store.dispatch(). Ini bukan cara yang benar untuk berinteraksi dengan toko redux dalam bereaksi. Anda harus menggunakan paket react-redux.


Anda ingin membungkus seluruh aplikasi Anda dalam komponen Provider yang menyediakan instance store. Sesuatu seperti ini:

import { render } from "react-dom";
import { Provider } from "react-redux";

import App from "./components/App";
import store from "./store";

const rootElement = document.getElementById("root");
render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

Dalam komponen Anda, gunakan hook useSelector untuk memilih nilai dari negara dan useDispatch untuk mengakses fungsi dispatch. (Anda juga dapat menggunakan komponen orde connect, tetapi kaitnya lebih disukai).

Saya tidak yakin apakah peredam ini adalah seluruh negara Anda atau jika Anda menggunakan combineReducers dan memiliki reduksi berganda seperti cart, products, dll. Pemilih ini dengan asumsi bahwa itu adalah seluruh negara .

function ShowCartContents() {
  const productIds = useSelector(state => Object.keys(state))
  
  return (
    <div>
        <h2>Ids In Cart: {productIds.join(", ")}</h2>
      </div>
  );
}
function ProductsList({ products }) {
  const dispatch = useDispatch();

  return (
    <div>
      {products.map((product) => (
        <div key={product.ProductID}>
          <h2>{product.ProductName}</h2>
          <h2>{product.ProductDescription}</h2>
          <h2>{product.ProductQuantity} units available</h2>

          <button onClick={() => dispatch(AddItemToCart(product.ProductID))}>
            Add to cart
          </button>
        </div>
      ))}
    </div>
  );
}
1
Linda Paiste 3 April 2021, 23:44