// context.js
import { createContext, useContext, useMemo, useState } from "react";

const initialState = {
  name: "binary",
};

const MyContext = createContext(null);

export const MyProvider = ({ children }) => {
  const [state, setState] = useState(initialState);

  const value = useMemo(() => ({ state, setState }), [state, setState]);

  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

export const useMyContext = () => {
  const context = useContext(MyContext);
  if (context === null) {
    throw new Error();
  }
  return context;
};

// App.js
import { useState } from "react";
import { MyProvider, useMyContext } from "./context";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <MyProvider>
        <MyComponent />
      </MyProvider>

      <button onClick={() => setCount(count + 1)}>count : {count}</button>
    </div>
  );
}

const MyComponent = () => {
  console.log("MyComponent render");
  const { state } = useMyContext();

  return (
    <div>
      <h2>name : {state.name}</h2>
    </div>
  );
};

const NameChangeComponent = () => {
  console.log("NameChangeComponent render");
  const { setState } = useMyContext();

  return (
    <div>
      <button onClick={() => setState({ name: "진수" })}>Change Name</button>
    </div>
  );
};

const Provider = ({ children }) => {
  const [state, setState] = useState('a');
  
  return (
    <Context1.Provider value={state}>
      <Context2.Provider value={setState}>
        {children}
      </Context2.Provider>
    </Context1.Provider>
  )
}

// slice.js
import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export const selectCount = (state) => state.counter.value

export default counterSlice.reducer

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

// Counter.js
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {
  decrement,
  increment,
  incrementByAmount,
  selectCount,
} from './counterSlice';
import styles from './Counter.module.css';

export function Counter() {
  const count = useSelector(selectCount);
  const dispatch = useDispatch();
  const [incrementAmount, setIncrementAmount] = useState('2');

  return (
    <div>
      <div>
        <button
          onClick={() => dispatch(increment())}
        >
          +
        </button>
        <span>{count}</span>
        <button
          onClick={() => dispatch(decrement())}
        >
          -
        </button>
      </div>
      <div>
        <input
          value={incrementAmount}
          onChange={e => setIncrementAmount(e.target.value)}
        />
        <button
          onClick={() =>
            dispatch(incrementByAmount(Number(incrementAmount) || 0))
          }
        >
          Add Amount
        </button>
      </div>
    </div>
  );
}

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
	des: () => set((state) => ({ count: state.count - 1 })),
	incrementByAmount: (value) => set(() => ({ count: value })),
}))

function Counter() {
  const { count, inc, incrementByAmount } = useStore()
	const [incrementAmount, setIncrementAmount] = useState('2');

  return (
    <div>
      <div>
        <button
          onClick={inc}
        >
          +
        </button>
        <span>{count}</span>
        <button
          onClick={des}
        >
          -
        </button>
      </div>
      <div>
        <input
          value={incrementAmount}
          onChange={e => setIncrementAmount(e.target.value)}
        />
        <button
          onClick={incrementByAmount(Number(incrementAmount))}
        >
          Add Amount
        </button>
      </div>
    </div>
  );
}

const setState = (partial, replace) => {
  // partial이 함수면 함수형 업데이트, 함수가 아닌 경우 partial을 다음 State로 한다.
  const nextState = typeof partial === "function" ? partial(state) : partial;

  // Object.is로 기존 상태와 다음 상태의 얕은 비교를 수행한다.
  if (!Object.is(nextState, state)) {
    const previousState = state;
    // replace 값이 truthy인 경우, nextState를 그대로 할당하여 현재 상태를 교체한다.
    // replace 값이 falsy인 경우, state와 nextState를 합친 새로운 객체를 현재 상태로 교체한다.
    // replace 값이 undefined 또는 null인 경우, nextState가 object가 아니거나, null인 경우
    // nextState를 그대로 할당 현재 상태를 교체,
    // 그 외의 경우 state와 nextState를 합친 새로운 객체를 현재 상태로 교체한다.
    state =
      replace ?? (typeof nextState !== "object" || nextState === null)
        ? nextState
        : Object.assign({}, state, nextState);

    // Loop를 돌며, listener에 인자을 넣어준다.
    listeners.forEach((listener) => listener(state, previousState));
  }
};

const subscribe = (listener) => {
    // 상태를 구독하는 함수를 등록한다.
    listeners.add(listener)
    // Unsubscribe
    return () => listeners.delete(listener)
}

const subscribeWithSelector = (fn) => (set, get, api) => {
  const origSubscribe = api.subscribe;
  api.subscribe = (selector, optListener, options) => {
    let listener = selector; // if no selector
    if (optListener) {
      const equalityFn = options?.equalityFn || Object.is;
      let currentSlice = selector(api.getState());
      listener = (state) => {
        const nextSlice = selector(state);
        if (!equalityFn(currentSlice, nextSlice)) {
          const previousSlice = currentSlice;
          optListener((currentSlice = nextSlice), previousSlice);
        }
      };
      if (options?.fireImmediately) {
        optListener(currentSlice, currentSlice);
      }
    }
    return origSubscribe(listener);
  };
  const initialState = fn(set, get, api);
  return initialState;
};

const store = create(
  subscribeWithSelector((set) => ({
    count: 0,
    text: "",
    inc: () => set((state) => ({ count: state.count + 1 })),
    setText: (text) => set({ text }),
  }))
);

store.subscribe((state) => console.log("State is changed: ", state));

store.subscribe(
  (state) => state.count,
  (count) => console.log("Count is changed: ", count)
);

store.subscribe(
  (state) => state.text,
  (text) => console.log("Text is changed: ", text)
);

store.getState().inc();
store.getState().setText('Changed');

import ReactExports from 'react'
import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
import { createStore } from './vanilla.ts'

const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports

let didWarnAboutEqualityFn = false

...

export function useStore<TState, StateSlice>(
  api: WithReact<StoreApi<TState>>,
  selector: (state: TState) => StateSlice = api.getState as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
	...
  const slice = useSyncExternalStoreWithSelector(
    api.subscribe,
    api.getState,
    api.getServerState || api.getState,
    selector,
    equalityFn,
  )
  return slice
}

const createImpl = <T>(createState: StateCreator<T, [], []>) => {
  const api =
    typeof createState === 'function' ? createStore(createState) : createState

  const useBoundStore: any = (selector?: any, equalityFn?: any) =>
    useStore(api, selector, equalityFn)

  Object.assign(useBoundStore, api)

  return useBoundStore
}

...

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <h1>
      {count}
      <button onClick={() => setCount(c => c + 1)}>one up</button>
    </h1>);
}

function atom(
    read,
    write,
  ) {
    const key = `atom${++keyCount}`
    const config = {
      toString: () => key,
    }
    if (typeof read === 'function') {
      config.read = read
    } else {
      config.init = read
      config.read = function (get) {
        return get(this)
      }
      config.write = function (
        this,
        get,
        set,
        arg,
      ) {
        return set(
          this,
          typeof arg === 'function'
            ? (arg)(get(this))
            : arg,
        )
      }
    }
    if (write) {
      config.write = write
    }
    return config
  }

const createStore = () => {

	...

	return {
	    get: readAtom, // atom의 값을 읽어온다.
	    set: writeAtom, // atom의 값을 변경한다.
	    sub: subscribeAtom,
	  }
}

const subscribeAtom = (atom, listener) => {
    const mounted = addAtom(atom);
		const flushed = flushPending();
    const listeners = mounted.l;
    listeners.add(listener);

    return () => {
      listeners.delete(listener);
      delAtom(atom);
    };
  };

const flushPending = () => {
    ...

    mounted.l.forEach((listener) => listener())

    ...
}

export function useAtom(
  atom,
  options,
) {
  return [
    useAtomValue(atom, options),
    // We do wrong type assertion here, which results in throwing an error.
    useSetAtom(atom),
  ]
}

export const useAtomValue(atom, options) {
	const store = useStore(options)

	...

	const [[valueFromReducer, storeFromReducer, atomFromReducer], rerender] =
	    useReducer(
	      (prev) => {
	        const nextValue = store.get(atom)
	        if (
	          Object.is(prev[0], nextValue) &&
	          prev[1] === store &&
	          prev[2] === atom
	        ) {
	          return prev
	        }
	        return [nextValue, store, atom]
	      },
	      undefined,
	      () => [store.get(atom), store, atom]
	    )

	let value = valueFromReducer;

	value = store.get(atom)

	...

	useEffect(() => {
	    const unsub = store.sub(atom, () => {
	      if (typeof delay === 'number') {
	        // delay rerendering to wait a promise possibly to resolve
	        setTimeout(rerender, delay)
	        return
	      }
	      rerender()
	    })
	    rerender()
	    return unsub
	  }, [store, atom, delay])

	return isPromiseLike(value) ? use(value) : (value)
}

export function useSetAtom(
  atom,
  options,
) {
  const store = useStore(options)
  const setAtom = useCallback(
    (...args: Args) => {
      return store.set(atom, ...args)
    },
    [store, atom],
  )
  return setAtom
}