I have 2 files as of right now and both of them have different initialState and reducers, but I've been having some trouble combining them into one

state.ts

const userState: IUState = {
      user: null,
}

const counterState: ICState = {
     counter: number,
}

const state = {
    userState,
    counterState
}

const reducer = combineReducers({
    counter: counterReducer as Reducer<State, ICAction>,
    user: userReducer as Reducer<State, IUAction>,
});

export const { GlobalStateProvider, dispatch, useGlobalState } = createStore(
    reducer,
    state as IState<typeof initialState> | any
);

It's showing up as undefined when I try to run the counter is there anyway to combine them together?

Hi, thanks for your amazing work

I was wondering if there is a good way to persist state when using createGlobalState?
I have seen the wiki, but the solution only applies to createStore.

It would be good if we could give a callback to createGlobalState which it calls on every update and we could set the localstorage in there.

Hey, thanks for the awesome package.

I have a question. I'm looking to implement something similar to Redux Persist. Is there a recommended approach for something like this?

const initialState = {
  query: async () => {
    const cachedQuery = await AsyncStorate.get('query')
    return cachedQuery || ''
  }
}
const { useGlobalState } = createGlobalState(initialState)

Maybe this makes more sense:

const initialState = {
  query: ''
}
const { useGlobalState } = createGlobalState(initialState)

const useGlobalQuery() {
  const [query, setQuery] = useGlobalState('query')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    (async () => {
      const cachedQuery = await AsyncStorate.get('query')
      if (cachedQuery) {
        setQuery(cachedQuery)
      }
      setLoading(false)
    })()
  }, [])

  useEffect(() => {
    AsyncStorage.set('query', query)
  }, [query])

  return [query, setQuery, { loading }] as const
}

Figured I would see what you suggest.

Big fan.

Could we add an example of how to run with Sagas?

In particular, I'd just like to cover:

• side effects (eg. updating asyncronous data fetching),
• ideally with middleware

shall we setState like native hook?

e.g., setData(newData) instead of

setData(v => newData)

It seems if I call during the first render setGlobalState, it does not proc. But useGlobalState works. Maybe setGlobalState gets queued until the end of render, in which case I need to set something before render is done.

Hi

I was just making a very simple store with some thunk, logger and devtools middleware.

When I run the app, all is fine. When I run tests with the devtools middleware I get:

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    ......./node_modules/react-hooks-global-state/src/devtools.js:55
    export const reduxDevToolsExt = () => {
    ^^^^^^

    SyntaxError: Unexpected token export

       5 | import { reducers } from "./reducers";
       6 | 
    >  7 | const { reduxDevToolsExt } = require('react-hooks-global-state/src/devtools');
         |                              ^
       8 | let enhancers = compose(
       9 |     applyMiddleware(reduxThunk, reduxLogger),
      10 |     reduxDevToolsExt(),

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.require (src/state/store.ts:7:30)

I have fixed it by simply not adding the devtools if I am in NODE_ENV test.

But do you think its solvable, to make it compliant with create-react-app jest test environment?

I followed some examples and tried to implement the global state. On any first page load, I want to call my back end and get some data. So in my App.js file I used useEffect to call a function to update the state:

const App = () => {
  useEffect(() => {
    updateRates();
  }, []);

  return (
    <Fragment>
      <GlobalStateProvider>
        <GlobalStyle />
        <Routes />
      </GlobalStateProvider>
    </Fragment>
  );
};
export default App;

I debugged and I know that everything works right and the state is updated. However, on the page load, instead of accessing the updated state, I get my initial state.

Here is my Container that should receive the updated state, however receives the initial state:

function Main() {
  const [value] = useGlobalState("rates");

  return (
    <Container>
      <div>
        <h1>Save and transfer money home with 0% fee</h1>
        <p>VES: {value}</p>
      </div>
    </Container>
  );
}

export default withRouter(Main);

What can be wrong?

Thanks!

I have a NextJs project with typescript. I'm seeing the above error with useGlobalState and reducer style.

const [cart] = useGlobalState("cart") <-- Argument of type '"cart"' is not assignable to parameter of type 'never'

But I'm not sure what the problem is at it looks the same as the examples. Any ideas?

I really like how almost identical it is to redux, and how it enables me early access to some of the things that might trickle down into react-redux. I don't like however that initial state is required.

I use typesafe-actions for mostly everything. And I use initial state in my reducers and have never depended on providing initial state on the top level where I combine the reducers. I mean, how silly is that? Therefore I have to do the following to be compliant with this library, and its really not a big deal:

const initialState = reducers(undefined, { type: undefined });

export const { GlobalStateProvider, dispatch, useGlobalState } = createStore(
    reducers,
    initialState,
    enhancers
);

Isn't there a possibility that this library could do this automatically when it doesn't receive initial state?

otherwise, I am going to do some tests now where I confirm the fact that needs to just work: sibling components that uses useGlobalState should not be affected by unrelated updates to the global state. I am sure that it works, but I haven't got the time to make this test yet. By opening react devtools and highlighting updates, this is very easy to check, but I need to just hack up some components.

I didn't found a way to easily reset global state to initial values.

Currently, to reset a state I need to reset each property of global state object. For a big state objects it is not an easy way. Is it possible to reset global state object with single command/function? Below is my code to reset a state.
Note: Strange, but array can be reset with new array only. Reset not works with globalStateInit.teamsCurrentTimeouts. Not sure why.

Example:

const globalStateInit = {
  teamsCurrentScores: {
    home: 0,
    visitor: 0,
  },
  teamsCurrentColors: {
    home: {
      background: 'red',
      text: 'blue',
    },
    visitor: {
      background: 'yellow',
      text: 'green',
    },
  },
  teamsCurrentTimeouts: {
    home: [false, false],
    visitor: [false, false],
  },
  
};

const {setGlobalState, useGlobalState} = createGlobalState(globalStateInit);

export const resetState = () => {
  setGlobalState(
    'teamsCurrentScores',
    () => globalStateInit.teamsCurrentScores,
  );
  setGlobalState(
    'teamsCurrentColors',
    () => globalStateInit.teamsCurrentColors,
  );
  setGlobalState('teamsCurrentTimeouts', prev => ({
    ...prev,
    home: [false, false],
    visitor: [true, false],
  }));
};

The README specifies

Redux middleware support to some extent

Some of libraries in Redux ecosystem can be used.
Redux DevTools Extension could be used in a simple scenario.

But I am not sure how to connect it to the store, could you provide an example ?

Problem: global state does not update when dispatch from inside useEffect the first time.

Example:

import * as React from 'react';
import { createStore } from 'react-hooks-global-state';

type State = { items: string[], loading: boolean }
type Action = { type: 'loadItems', items: string[] }
  | { type: 'loading', loading: boolean };

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'loadItems': return { ...state, items: action.items }
    case 'loading': return { ...state, loading: action.loading }
    default: return state;
  }
}

const initialState: State = { items: [], loading: false };
const { GlobalStateProvider, useGlobalState, dispatch } = createStore(reducer, initialState);

const loadInitialCount = async () => {
  dispatch({type: 'loading', loading: true});
  return new Promise<string[]>(resolve => setTimeout(() => resolve(['item1', 'item2']), 3000))
  .then(items => {
    dispatch({type: 'loading', loading: false});
    dispatch({type: 'loadItems', items});
  });
}

const ItemList = () => {
  const [items] = useGlobalState('items');
  const [loading] = useGlobalState('loading');

  React.useEffect(() => {
    loadInitialCount();
  }, []);

  if (loading) return <span>Loading...</span>;

  return (
    <>
      <button onClick={loadInitialCount}>reload</button>
      <ul>
        {items.map(item => <li key={item}>{item}</li>)}
      </ul>
    </>
  );
};

export default () => {
  return (
    <GlobalStateProvider>
      <ItemList />
    </GlobalStateProvider>);
};

When "loadInitialCount()" is called the first time, "Loading..." won't show up. But it's shown when click "reload" button.

I found that this is because "GlobalStateProvider" registers listener inside "useEffect" which is called after "useEffect" of "ItemList" component . So the "loading" state is not updated the first time.

I know this would change the library quite a bit, but I'm in search of a decent state system that would let me build my own state abstraction, and since you've spent so much time thinking about and working with concurrent mode, I'd prefer to lean on something that's been tested thoroughly.

You can see me explaining it here and better example code is here.

What I'd need basically is a way to use a single hook, but be able to access as many state keys as necessary throughout the render and have it "track". So something like this:

const state = useGlobalState(stateObject)

state.someValue // access
state.someValue = 1 // set

It's similar to your react-tracked, but using a class first syntax instead of reducer. I've actually written it already over Recoil fully, but Recoil fails at HMR. I may even take a stab at fixing Recoil HMR, but I do think Recoil seems to be overkill and they are heading in a very complex direction from what I can see, while not prioritizing a lot of community requests at all (explicitly not prioritizing them).

Hi, I would like to ask how people use this library.

Honestly, I would like to drop some features of this library eventually before hitting v1.
It will not happen soon. I will probably wait and see how observedBits is kept or not in React 17.

My two concerns are:

1. Redux DevTools support is very limited
2. Redux middleware support is very limited

I would suggest the following paths to my other projects.

• For those who want to use Redux ecosystem 👉 reactive-react-redux or the official React Redux hooks.
• For those who use complex states with reducer pattern 👉 react-tracked

For those who want a simple solution for a small state (less than 31 properties flat), continue using this library!

With React 16.8.1 I noticed the following error log:
Warning: useContext() second argument is reserved for future use in React. Passing it is not supported.

I am not sure about the intention of the 2nd parameter here:
const state = useContext(context, 1 << index);
but I guess it can simply be removed ?

Discussion from https://link.medium.com/gXvqudhDNR

I'm new in TS and now I got error type in logger and reducer . Can you have an example about separate reducer thanks you.

========= state.ts =============

import { Dispatch } from 'react';
import { applyMiddleware, combineReducers } from 'redux';
import { createStore } from 'react-hooks-global-state';
import { ActionCounter, initialStateCounter, countReducer } from './counter';

const initialState = {
  ...initialStateCounter,
};

type State = typeof initialState;

const reducer = combineReducers({
  count: countReducer,
});

interface Action {
  count: ActionCounter;
}
const logger = ({ getState }: { getState: () => State }) => (next: Dispatch<Action>) => (action: Action) => {
  /* eslint-disable no-console */
  console.log('will dispatch', action);
  const returnValue = next(action);
  console.log('state after dispatch', getState());
  /* eslint-enable no-console */
  return returnValue;
};

export const { dispatch, useGlobalState } = createStore<State, Action>(reducer, initialState, applyMiddleware(logger));

========= conter.ts =============

export const initialStateCounter = {
  count: 0,
};

export type ActionCounter = { type: 'increment' } | { type: 'decrement' };

export const countReducer = (state = initialStateCounter.count, action: ActionCounter) => {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
};

Hello,

I'd like to know about the difference between react-tracked and react-hooks-global-state. I am using your package and just thought I'd like to know the differences.

One thing I have in mind: I am using your package to set a global settings object coming from a headless CMS. I use NextJS and the settings being received from the server through getInitialPageProps. Now I'd like to make them globally available because many components are in need to get these values.

const [appSettings, setAppSettings] = useGlobalState('settings') // => how can I set these object on the first render? 

It would be great if useGlobalState would offer the default/initial values that I don't need a useEffect to set my app settings.

Hi, thanks for the repo. One thing that I noticed, is that the global state is not preserved with the Fast Refresh functionality. If code changes are done, then Fast Refresh kicks in to reload the UI, but in this case the global state is not preserved as I would have used useState normally. Is there a way to fix this?

Hi,
Thanks for working on that library.
I see you released new version.
Please add changelog on version 0.17.0

There is no getState for createGlobalState (the one you use without redux).

So its not possible to get the state inside a non-react functional component without write this hack.

    var state;
    setGlobalState('login', v => {
      state = v;
      return v;
    });

Hi, receiving the following in a situation I don't think I can do anything about

getGlobalState should not be used in render.

My App.js:

const App = () => (
  <GlobalStateProvider>
    <ApolloProvider client={ApolloClient}>
      <Layout />
    </ApolloProvider>
  </GlobalStateProvider>
);

Here I pass ApolloClient as a prop for the react-apollo context. I import this client from a separate file. Part of creating the client includes creating an object with a callback which in my use case, needs access to a global state item.

new ApolloClient({
  link: ApolloLink((operation, forward) => {
    operation.setContext({ magic: getGlobalState('magic') });
  }),
});

The use of getGlobalState here is triggering the error however there is no rendering going on in this file, at least none that I have control over. It isn't feasible to do something like

const App = () => {
    const magicState = useGlobalState('magic');

    return (
      <GlobalStateProvider>
        <ApolloProvider client={createClient(magicState)}>
          <Layout />
        </ApolloProvider>
      </GlobalStateProvider>
    );
}

The above will create issues with how react-apollo works (there is cache and the like stored in the client, so i need to stick to one instance).

Is it necessary to throw this error?

Hi, first thanks for this great library!

I'm sharing a global state between components, exporting from the globalStage.js:

import * as actions from './actions';
import { contactModalReducer, newsletterModalReducer, searchModalReducer } from './reducers';
import { createStore } from 'react-hooks-global-state';

// Initial app state
const initialState = {
  modalContactsOpen: false,
  modalSearchOpen: false,
  modalNewsletterOpen: false,
};

const reduceReducers = (...reducers) => (state, action) =>
  reducers.reduce((acc, nextReducer) => nextReducer(acc, action), state);

const { dispatch, useGlobalState } = createStore(
  reduceReducers(
    contactModalReducer,
    searchModalReducer,
    newsletterModalReducer,
  ),
  initialState
);

export { dispatch, useGlobalState };

I'm wondering... how to restore the initial state from the localStorage object using createStore?

Hello @dai-shi, firstly, thanks for this awesome package, I just encounter a wired issue when I adopt this package. After deeply digging, i felt the root cause is about the "module field in package.json" probably.

The issue is when I running my application,I saw this error message:

./node_modules/react-hooks-global-state/src/index.js 68:6
Module parse failed: Unexpected token (68:6)
You may need an appropriate loader to handle this file type.
|   const setGlobalState = (name, update) => {
|     globalState = {
>       ...globalState,   <<<  something wrong here
|       [name]: updateValue(globalState[name], update),
|     };

My application stack is

• [email protected]
• [email protected]
• [email protected]

The wired thing is when I use npm will fix this issue. So I try to clone this code and use npm link to do some local testing, I found if I remove module field in package.json or change it to dist/index.js will fix this issue certainly.

Seems like module is still proposal and not sure if there's any different when developer use yarn or npm install the package.

NOTE: You may aware that above error is from the source code(src) instead of dist in the runtime

Could we fix this issue just remove the module field or change it to dist/index.js

Thanks

Hi, I was wondering if anyone has a way to mock this store for testing purposes? I have a page that renders differently depending on the contents of the store. I'm currently using jest and RTL. Thanks!

In MobX, for example, I can change at any place a value that will cause the related components to re-render.

MobX would solve my issue, but, it's a bit of overkill, as your package is much lighter.

Is it possible to change a global state outside a component?

Hello Daishi. Trying to wrap my head around your library.

I'm curious why did you design the reducer API like this:

const initialState = { counter: 0 }; // initialState is not optional.
const { GlobalStateProvider, dispatch, useGlobalState } = createStore(reducer, initialState);

const Counter = () => {
  const [value] = useGlobalState('counter');
  return (
    <div>
      <span>Counter: {value}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
    </div>
  );
};

and not like this:

const initialState = { counter: 0 }; // initialState is not optional.
const { GlobalStateProvider, useGlobalState } = createStore(reducer, initialState);

const Counter = () => {
  const [value, dispatch] = useGlobalState('counter');
  return (
    <div>
      <span>Counter: {value}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
    </div>
  );
};

I'm not sure about all pros & cons, except that the second one looks more similar to basic setState option (which is a plus). Will appreciate your clarification.

https://github.com/dai-shi/react-hooks-global-state/wiki/Persistence

is there any example for React Native here? And if not, then i think it would be great feature for this library.
Thanks.

After updating to 0.16 -> 0.17, getGlobalState returns the old state value after a change. useGlobalState seems fine

We are using this library for maintaining authentication state.
As part of auth we are storing multiple user related values.
Is there a way to update all of them in oneshot like
setGlobalState(prvsState => ({...prvsState, ...updatedState}))

So I started using a 3rd party api that loads side by side the initial render. When setGlobalState is called, the first render does not notice the state was changed.

A second forced render a second later, picks up on the change. Something is making observableBits crap out, and I am not sure I could easily replicate this.

Is there anywhere in the code here, if setState gets called, it wont render upon initial render.

EDIT: I traced this bug/feature, hoping its a bug. If the initialState does not define the field, during first render it gets skipped over.

Broken code

initialState = {
}

const [s_user] = useGlobalState("user");

function asynccallback() {
    setGlobalState("user", ()=> {return {email: "[email protected]"}})
}

Working code

initialState = {
    user: {}
}

const [s_user] = useGlobalState("user");

function asynccallback() {
    setGlobalState("user", ()=> {return {email: "[email protected]"}})
}

While calling createStore, getting following error

This expression is not callable
Each member of the union type 'CreateStore | CreateReduxLikeStore' has signatures, but none of these signatures are compatible with each other.

Note I am using Typescript version 3.6.4

I know this used to be an issue below Typescript 3.3. But it was fixed as stated in change logs. https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#typescript-33

Hi,
a question: I would like to initialize a value with null, something like

const initialState = {
  user: null
};

const [_, setUser] = useGlobalState<IUser | null>("user");

I get an error:

Type error: Type 'IUser' does not satisfy the constraint '"user"'

Is there any workaround?

Thanks!

1. This case happened, when user closing application but application living in back process
2. Open, for example: whatsapp or any other app
3. And then open my application again
   But its not always... for some reason, i dont know
   Thanks !!!

First off: awesome library! No deps, simple, clean, love it! ❤️

Are there any ideas for persistence?
Right now I'm doing this and it works pretty good 💪

import { createStore } from 'react-hooks-global-state'

import { DispatchedAction } from './actions'
import reducer from './reducer'

export type State = {
	counter: number
}

const persistenceKey = 'my_cool_app_persistence'

const firstState: State = { counter: 0 }

const initialStringFromStorage = localStorage.getItem(persistenceKey)
const initialState: State = initialStringFromStorage === null
	? firstState
	: JSON.parse(initialStringFromStorage)

const persistentReducer = (state: State, action: DispatchedAction) => {
	const mutated: State = reducer(state, action)
	localStorage.setItem(persistenceKey, JSON.stringify(mutated))
	return mutated
}

export const { GlobalStateProvider, dispatch, useGlobalState } = createStore(persistentReducer, initialState)

Maybe one could do a small github wiki entry and link it in the README.
Any thoughts/ideas?

Using react hotloader

import {hot} from 'react-hot-loader'
export default hot(module)(App)

Does not work, is there a way to get it to work without having the state reset every time a hotoad happens?