react-global-state-management v1.3.3

react-global-state-management

When you look about global state management system, you will find DataContext or even more complex like Redux The problem with those two are

1- DataContext is a global context but for it to be able to work with state you will have to assign it a mutated data and that will cause it to update globaly, which is in many times not nessecry needed, and you cannot controll how it works.

2- Redux is just to complex to setup and I would not like working with ever.

So I build I library where you can reach your data globally and also controll to which components and its properties should trigger a rebuild when changing the data.

This library works for all apps that uses react as its base, eg like react-native and reactjs

Install

npm i react-global-state-management

Example

Have a look at Snack

Usage

import GlobalState from 'react-global-state-management';
const data = GlobalState({
  text: 'someText',
  item: { counter: 0, item2: { counter: 0 } },
  arr:[{test: 0}]
});

const TTX = () => {
  // bind mutated to this component 
  // You could also have a global mutation with only "data.hook();"
  // below mean that only when data.item.item2.counter changed, it will trigger rebuild for this component.
  data.hook("item.item2.counter"); 
  return <Text>counterComponentWithHook: {data.item.item2.counter}</Text>;
};

const TTX2 = () => {
  data.subscribe(
    (item, props) => {
      console.log('data.item.counter Changed in TTX2 component', props);
    },
    "item.counter"
  );
  return <Text>counterComponentWithoutHook: {data.item.counter}</Text>;
};


export default function App() {
  data.subscribe((item, props) => {
    console.log('data Changed in App component', props);
  });
  return (
    <View>
      <Text>
        AppComponentCounter: {data.item.counter}
      </Text>
      <TTX />
      <TTX2 />
      <Button
        title="inc Counter"
        onPress={() => {
          data.item.counter++;
        }}
      />

      <Button
        title="inc counter2"
        onPress={() => {
          data.item.item2.counter++;
        }}
      />

        <Button
        title="inc array"
        onPress={() => {
          data.arr[0].test++;
          data.arr.push({test:5}) // this will also trigger change
        }}
      />
    </View>
  );
}

Properties and events

Rebuild the component when a change happened

hook() OR hook("item.counter", ...)

Rebuild the component with conditions

on<boolean>("item.enabled", (value)=> value === true)

Subscribe to changes when the global data change. This works like useEffect except You will have more control over your updates and this will not trigger rebuild

// global
data.subscribe(
    (item, props) => {
      console.log('GlobalState Changed');
    }
  ); 
  
  //OR
  
 // Only when item.counter
  data.subscribe(
    (item, props) => {
      console.log('item.item2.counter Changed in TTX2 component');
    },
    "item.counter",...
  );  
  

Exelude objects in array

Typescript will complain when you add a path that is contained in array, as execludeComponentsFromMutations only take object path in its array. To solve this issue, you are able to assign a method to execludeComponentsFromMutations that return true if it execluded and false if not

  const data = GlobalState({
  text: 'someText',
  item: { counter: 0, item2: { counter: 0 } },
  arr:[{test: 0, item: {text:""}}]
}, (path)=> {
  if (path === "arr.item")
      return true; // execlude `arr.item` from mutation
    return false;
});