andregardi

export const add1ToPopuation = (store) => (state) => {
  state.cities[0].population[0].population++;
};

andregardi

export const changeWeatherDescription = (store, description) => {
  store.setState((state) => {
    state.cities[0].weatherStatus.current.weather[0].description = description;
  });
};

andregardi

import React from "react";
import Immer from "immer";
import globalHook from "use-global-hook";
import * as actions from "../actions";
import { initialState } from "./initialState";

const options = { Immer };
const useGlobal = globalHook(React, initialState, actions, options);

export default useGlobal;

andregardi

import React from 'react';
import globalHook from 'use-global-hook';
 
const initialState = {
  counter: 0,
};
 
const actions = {
  addToCounter: (store, amount) => {
    const newCounterValue = store.state.counter + amount;

andregardi

store.setState((state) => {
    state.cities[0].weatherStatus.current.weather[0].description = "Clear sky";
 });

andregardi

const newWeatherItem = { ...state.cities[0].weatherStatus.current.weather[0], description: "Clear sky" }
const newWeather = [...state.cities[0].weatherStatus.current.weather]
newWeather[0] = newWeatherItem
const newCurrent = { ...state.cities[0].weatherStatus.current, weather: newWeather }
const newWeatherStatus = { ...state.cities[0].weatherStatus, current: newCurrent }
const newCities = [...state.cities]
newCities[0] = { ...newCities[0], weatherStatus: newWeatherStatus }

const newState = { ...state, cities: newCities }

andregardi

const state = {
  cities: [
    {
      name: "Chicago",
      state: "Illinois",
      population: [
        {
          year: 2020,
          population: 2713984
        }

andregardi

orderDot

Local

JSON here

andregardi

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<div id="main">
  <h1>Shopping cart</h1>
  <p>Apples: {{ products.apple }}</p>
  <p>Bananas: {{ products.banana }}</p>
  <p>Oranges: {{ products.orange }}</p>
</div>

<script>

andregardi

<h1>Products catalog</h1>
<h2>Apple <button value="apple">Add to cart</button></h2>
<h2>Banana <button value="banana">Add to cart</button></h2>
<h2>Orange <button value="orange">Add to cart</button></h2>

<script>
  const addToCart = e => window.parent.postMessage(e.target.value, "*");
  document
    .querySelectorAll("button")
    .forEach(button => button.addEventListener("click", addToCart));