Queriendo aprender Redux, comencé tratando de emular el patrón redux en JavaScript vainilla. Usé localStorage para centralizar datos.
Aquí está mi repositorio de GitHub -> https://github.com/GroovyHooked/Redux_Pattern
Todo parece funcionar bien hasta que presiono el botón de actualización. Cuando lo hago, puedo recuperar los datos almacenados y registrarlos en la consola, pero si presiono un botón para aumentar o disminuir un valor, aparece este error:
reducer.js:6 Uncaught TypeError: Cannot create property item on string {"item":5,"value":50} at reducer (reducer.js:6:18) at buyItem (action.js:6:3) at HTMLButtonElement.<anonymous> (index.js:15:41)Estoy un poco confundido acerca de lo que está pasando y parece que no puedo encontrar ninguna información sobre el tema.
¿Alguien, por favor, puede iluminarme sobre el tema?
/* --------- index.js ---------- */ import { buyItem, sellItem } from "./action.js"; import { BUY, SELL } from "./const.js"; export var store = localStorage.getItem("store") || { item: 0, value: 0 }; export const dataDisplay1 = document.querySelector("#state-item"); export const dataDisplay2 = document.querySelector("#state-value"); dataDisplay1.innerHTML = store.item ? store.item : 0; dataDisplay2.innerHTML = store.value ? store.value : 0; const button1 = document.querySelector("#buy"); const button2 = document.querySelector("#sell"); button1.addEventListener("click", () => buyItem({ type: BUY })); button2.addEventListener("click", () => sellItem({ type: SELL })); /* --------- action.js ---------- */ import { reducer } from "./reducer.js"; import { dataDisplay1, dataDisplay2 } from "./index.js"; import { store } from "./index.js"; export const buyItem = (action) => { reducer(store, action); dataDisplay1.innerHTML = store.item; dataDisplay2.innerHTML = store.value; }; export const sellItem = (action) => { reducer(store, action); dataDisplay1.innerHTML = store.item; dataDisplay2.innerHTML = store.value; }; /* --------- reducer.js ---------- */ import { BUY, SELL } from "./const.js"; export const reducer = (state, action) => { switch (action.type) { case BUY: state.item = state.item + 1; state.value = state.value + 10; return localStorage.setItem("store", JSON.stringify(state)); case SELL: state.item = state.item - 1; state.value = state.value - 10; return localStorage.setItem("store", JSON.stringify(state)); default: return localStorage.setItem( "store", JSON.stringify({ item: 0, value: 0, name: "Bankruptcy" }) ); } };Parece que su problema probablemente esté relacionado con el uso de la versión JSON.stringified de la tienda y no con JSON.parsing antes de intentar asignarle.
/* --------- index.js ---------- */ import { buyItem, sellItem } from "./action.js"; import { BUY, SELL } from "./const.js"; const initialState = { item: 0, value: 0 }; export var store = JSON.parse(localStorage.getItem("store") || JSON.stringify(initialState)); export const dataDisplay1 = document.querySelector("#state-item"); export const dataDisplay2 = document.querySelector("#state-value"); dataDisplay1.innerHTML = store.item ? store.item : 0; dataDisplay2.innerHTML = store.value ? store.value : 0; const button1 = document.querySelector("#buy"); const button2 = document.querySelector("#sell"); button1.addEventListener("click", () => buyItem({ type: BUY })); button2.addEventListener("click", () => sellItem({ type: SELL })); /* --------- action.js ---------- */ import { reducer } from "./reducer.js"; import { dataDisplay1, dataDisplay2 } from "./index.js"; import { store } from "./index.js"; export const buyItem = (action) => { reducer(store, action); dataDisplay1.innerHTML = store.item; dataDisplay2.innerHTML = store.value; }; export const sellItem = (action) => { reducer(store, action); dataDisplay1.innerHTML = store.item; dataDisplay2.innerHTML = store.value; }; /* --------- reducer.js ---------- */ import { BUY, SELL } from "./const.js"; export const reducer = (state, action) => { switch (action.type) { case BUY: state.item = state.item + 1; state.value = state.value + 10; return localStorage.setItem("store", JSON.stringify(state)); case SELL: state.item = state.item - 1; state.value = state.value - 10; return localStorage.setItem("store", JSON.stringify(state)); default: return localStorage.setItem( "store", JSON.stringify({ item: 0, value: 0, name: "Bankruptcy" }) ); } };Además, tenga en cuenta que probablemente sea mejor / más seguro reasignarlo al objeto en lugar de mutarlo directamente.