KidkArolis · March 16, 2020 13:22 · KidkArolis · Mar 15, 2020 · markerikson · Mar 15, 2020
diff --git a/_intro.md b/_intro.md
diff --git a/createStoreModern.js b/createStoreModern.js
 export function createStore(state, actions) {
  let listeners = []

  function get() {
    return state
  }

  function set(next) {
    state = { ...state, ...next }
    listeners.forEach(l => l())
  }

  function dispatch(type, payload) {
    actions[type]({ get, set }, payload)
  }

  function subscribe(f) {
    listeners.push(f)
    return () => {
      listeners = listeners.filter(ff => f !== ff)
    }
  }

  return { get, set, dispatch, subscribe }
 }
diff --git a/useStoreModern.js b/useStoreModern.js
 /*

 This is a "modern" version of the store hooks, that could be used in the next version of tiny-atom
 once useMutableSource lands in React. It handles our 4 requirements with ease:

 1. Re-render at most once per request animation frame
 this version does not render once per animation frame, but useMutableSource does batch changes within the same tick

 2. Do not re-render children twice (if naively implemented – it happens once from parent, once from subscription)
 useMutableSource takes care of that

 3. Re-render parents first to avoid "zombie children"
 useMutableSource takes care of that

 4. Only re-render if selected slice of state changed
 this is something we have to handle and I'm not sure about the correct way to do that

 */

 import React, { useState, createContext, createMutableSource, useContext, useCallback, useMutableSource } from 'react'
 import { createStore } from './createStore'
 import { areEqual } from './areEqual'

 const MutableSourceContext = createContext()
 const MutableSourceProvider = MutableSourceContext.Provider

 export function useStore(initialState, actions, deps = []) {
  const [store] = useState(() => createStore(initialState, actions))
  const [mutableSource] = useState(() => createMutableSource(store, () => store.get()))
  const [Provider] = useState(() => ({ children }) => (
    <MutableSourceProvider value={mutableSource}>{children}</MutableSourceProvider>
  ))
  return { Provider }
 }

 export function useSelector(selectorFn = x => x, deps = [], name = 'Unknown') {
  const mutableSource = useContext(MutableSourceContext)
  const selector = useCallback(selectorFn, deps)

  const getSnapshot = useCallback(
    memoize(store => selector(store.get())),
    [selector]
  )

  const subscribe = useCallback(
    (store, callback) => {
      let prevSnapshot
      return store.subscribe(() => {
        const nextSnapshot = getSnapshot(store)
        if (prevSnapshot !== nextSnapshot) {
          prevSnapshot = nextSnapshot
          callback()
        }
      })
    },
    [getSnapshot]
  )

  return useMutableSource(mutableSource, getSnapshot, subscribe)
 }

 export function useDispatch() {
  const { dispatch } = useStoreInstance()
  return dispatch
 }

 export function useStoreInstance() {
  return useContext(MutableSourceContext)._source
 }

 function memoize(fn) {
  let prev
  return (...args) => {
    const next = fn(...args)
    if (!areEqual(prev, next)) {
      prev = next
    }
    return prev
  }
 }
	export function createStore(state, actions) {
	let listeners = []

	function get() {
	return state
	}

	function set(next) {
	state = { ...state, ...next }
	listeners.forEach(l => l())
	}

	function dispatch(type, payload) {
	actions[type]({ get, set }, payload)
	}

	function subscribe(f) {
	listeners.push(f)
	return () => {
	listeners = listeners.filter(ff => f !== ff)
	}
	}

	return { get, set, dispatch, subscribe }
	}
	/*

	This is a "modern" version of the store hooks, that could be used in the next version of tiny-atom
	once useMutableSource lands in React. It handles our 4 requirements with ease:

	1. Re-render at most once per request animation frame
	this version does not render once per animation frame, but useMutableSource does batch changes within the same tick

	2. Do not re-render children twice (if naively implemented – it happens once from parent, once from subscription)
	useMutableSource takes care of that

	3. Re-render parents first to avoid "zombie children"
	useMutableSource takes care of that

	4. Only re-render if selected slice of state changed
	this is something we have to handle and I'm not sure about the correct way to do that

	*/

	import React, { useState, createContext, createMutableSource, useContext, useCallback, useMutableSource } from 'react'
	import { createStore } from './createStore'
	import { areEqual } from './areEqual'

	const MutableSourceContext = createContext()
	const MutableSourceProvider = MutableSourceContext.Provider

	export function useStore(initialState, actions, deps = []) {
	const [store] = useState(() => createStore(initialState, actions))
	const [mutableSource] = useState(() => createMutableSource(store, () => store.get()))
	const [Provider] = useState(() => ({ children }) => (
	<MutableSourceProvider value={mutableSource}>{children}</MutableSourceProvider>
	))
	return { Provider }
	}

	export function useSelector(selectorFn = x => x, deps = [], name = 'Unknown') {
	const mutableSource = useContext(MutableSourceContext)
	const selector = useCallback(selectorFn, deps)

	const getSnapshot = useCallback(
	memoize(store => selector(store.get())),
	[selector]
	)

	const subscribe = useCallback(
	(store, callback) => {
	let prevSnapshot
	return store.subscribe(() => {
	const nextSnapshot = getSnapshot(store)
	if (prevSnapshot !== nextSnapshot) {
	prevSnapshot = nextSnapshot
	callback()
	}
	})
	},
	[getSnapshot]
	)

	return useMutableSource(mutableSource, getSnapshot, subscribe)
	}

	export function useDispatch() {
	const { dispatch } = useStoreInstance()
	return dispatch
	}

	export function useStoreInstance() {
	return useContext(MutableSourceContext)._source
	}

	function memoize(fn) {
	let prev
	return (...args) => {
	const next = fn(...args)
	if (!areEqual(prev, next)) {
	prev = next
	}
	return prev
	}
	}