Skip to content

Instantly share code, notes, and snippets.

@josefrichter

josefrichter/store.ts

Forked from koenbok/store.ts
Created June 17, 2020 13:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save josefrichter/66e7c6a2e83d07e2e75b0a1cac9f4e95 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save josefrichter/66e7c6a2e83d07e2e75b0a1cac9f4e95 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @koenbok koenbok revised this gist Apr 15, 2019. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions store.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -4,10 +4,16 @@ import { useState, useEffect } from "react";
    /**
    A hook to simply use state between components
    Usage:
    // You can put this in an central file and import it too
    const useStore = createStore({ count: 0 })
    // And this is how you use it from any component
    export function Example() {
    const [store, setStore] = useStore()
    const updateCount = () => setStore({ count: store.count + 1 })
    return <div onClick={updateCount}>{store.count}</div>
    }
    */
  2. @koenbok koenbok revised this gist Apr 2, 2019. 1 changed file with 18 additions and 21 deletions.
    39 changes: 18 additions & 21 deletions store.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,10 @@
    import * as React from "react"
    import { useState, useEffect } from "react"
    import * as React from "react";
    import { useState, useEffect } from "react";

    /**
    A hook to simply use state between components
    Usage:
    const useStore = createStore({ count: 0 })
    export function Example() {
    const [store, setStore] = useStore()
    const updateCount = () => setStore({ count: store.count + 1 })
    @@ -16,20 +13,20 @@ export function Example() {
    */

    export function createStore<T>(state: T) {
    let storeState: T = Object.assign({}, state)
    const storeSetters = new Set()

    const setStoreState = (state: Partial<T>) => {
    storeState = Object.assign({}, storeState, state)
    storeSetters.forEach(setter => setter(storeState, storeState))
    }

    function useStore(): [T, typeof setStoreState] {
    const [state, setState] = useState(storeState)
    useEffect(() => () => storeSetters.delete(setState), [])
    storeSetters.add(setState)
    return [state, setStoreState]
    }

    return useStore
    let storeState: T = Object.assign({}, state);
    const storeSetters = new Set();

    const setStoreState = (state: Partial<T>) => {
    storeState = Object.assign({}, storeState, state);
    storeSetters.forEach(setter => setter(storeState));
    };

    function useStore(): [T, typeof setStoreState] {
    const [state, setState] = useState(storeState);
    useEffect(() => () => storeSetters.delete(setState), []);
    storeSetters.add(setState);
    return [state, setStoreState];
    }

    return useStore;
    }
  3. @koenbok koenbok revised this gist Apr 2, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion store.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    import * as React from "react"
    import { useState, useEffect, useMemo } from "react"
    import { useState, useEffect } from "react"

    /**
    A hook to simply use state between components
  4. @koenbok koenbok created this gist Mar 31, 2019.
    35 changes: 35 additions & 0 deletions store.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    import * as React from "react"
    import { useState, useEffect, useMemo } from "react"

    /**
    A hook to simply use state between components
    Usage:
    const useStore = createStore({ count: 0 })
    export function Example() {
    const [store, setStore] = useStore()
    const updateCount = () => setStore({ count: store.count + 1 })
    return <div onClick={updateCount}>{store.count}</div>
    }
    */

    export function createStore<T>(state: T) {
    let storeState: T = Object.assign({}, state)
    const storeSetters = new Set()

    const setStoreState = (state: Partial<T>) => {
    storeState = Object.assign({}, storeState, state)
    storeSetters.forEach(setter => setter(storeState, storeState))
    }

    function useStore(): [T, typeof setStoreState] {
    const [state, setState] = useState(storeState)
    useEffect(() => () => storeSetters.delete(setState), [])
    storeSetters.add(setState)
    return [state, setStoreState]
    }

    return useStore
    }