useStore

[thchia]

Using useReducer to create a global state object, store in Context and accessed with useContext:

const MyContext = createContext();

function MyProvider(props) {
  let [state, dispatch] = useGlobalState();

  return (
    <MyContext.Provider value={{ state, dispatch }}>
      {props.children}
    </MyContext.Provider>
  );
}

export function useMyContext() {
  return useContext(MyContext);
}

function MyConsumer() {
  let { state, dispatch } = useMyContext()

  return (
    <button onClick={() => dispatch({ type: 'SOME_THING' })}>
      {state.some.thing}
    </button>
  )
}

https://gist.github.com/thchia/dd1bc8200fd8cff89cfa6c928983e5c4

[giuseppeg]

cc @philipp-spiess

[philipp-spiess]

Check out https://github.com/philipp-spiess/use-store. It's not using useReducer to set up the store (maybe we can manage to add support for that?) but you can use your existing Redux-like store with ease and interact with the store outside of React as well.

[thchia]

@philipp-spiess looks great! I was coming at it more from the perspective of a non-redux user, and thinking about it in super simple terms. i.e. combining useContext and useReducer to offer a way to store and update a complex, app-global object.