Easy way to provide global state to ReactJS and React Native applications

Installation

npm install @raulpesilva/re-state

or

yarn add @raulpesilva/re-state

See documentation -

Simple Usage -

import * as React from 'react';
import { useReState } from '@raulpesilva/re-state';

import { StyleSheet, View, Text, Button } from 'react-native';

const Foo: React.FC = () => {
  const [value, setValue] = useReState<number>('value', 0);

  return (
    <View style={styles.container}>
      <Button onPress={() => setValue(value + 1)} title=" + " />
      <Text>State value: {value}</Text>
      <Button onPress={() => setValue(value > 0 ? value - 1 : 0)} title=" - " />
    </View>
  );
};

const Bar: React.FC = () => {
  const [value] = useReState<number>('value', 0);

  return (
    <View style={styles.container}>
      <Text>State value: {value}</Text>
    </View>
  );
};

export default function App() {
  return (
    <View style={styles.container}>
      <Foo />
      <Bar />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Advanced Usage

Creating new global state

// state/user/index.ts

import { createReState, createReStateSelect, createReStateDispatch, createGetReState } from '@raulpesilva/re-state';

type User = {
  _id: string;
  name: string;
  email: string;
  iat: number;
  avatar: string;
};

export const USER = 'user';
export const userInitialValue = {};

export const useUser = createReState<User>(USER, userInitialValue);
export const useUserSelect = createReStateSelect<User>(USER);
export const dispatchUser = createReStateDispatch<User>(USER);
export const getUser = createGetReState<User>(USER);
export const resetUser = () => dispatchUser(userInitialValue);

// components/User.tsx

import { useUser } from 'state/user';

const User = () => {
  const [user, setUser] = useUser();

  return (
    <div>
      <h1>{user.name}</h1>
      <img src={user.avatar} />
      <p>{user.email}</p>
      <button
        onClick={() =>
          setUser({
            _id: '123',
            name: 'Raul',
            email: 'raul@email.com',
            iat: 123,
            avatar: 'https://github.com/raulpesilva.png',
          })
        }
      >
        Set User
      </button>
    </div>
  );
};

Using previous state

// components/User.tsx

  import { useUser } from 'state/user'

  const User = () => {
    const [user, setUser] = useUser()

    return (
      <div>
        <h1>{user.name}</h1>
        <img src={user.avatar} />
        <p>{user.email}</p>
        <button onClick={() => setUser((prev) => {...prev, name: 'Raul P' })}>
          Change name
        </button>
      </div>
    )
  }

or

// components/User.tsx

  import { useUserSelect, useUserDispatch } from 'state/user/index'

  const User = () => {
    const user = useUserSelect()

    return (
      <div>
        <h1>{user.name}</h1>
        <img src={user.avatar} />
        <p>{user.email}</p>
        <button onClick={() => useUserDispatch((prev) => {...prev, name: 'Raul P' })}>
          Change name
        </button>
      </div>
    )
  }

Adding changeName action

// state/user/index.ts
...
export const dispatchUser = createReStateDispatch<User>(USER)
export const getUser = createGetReState<User>(USER)
export const resetUser = () => dispatchUser(userInitialValue)
// + adding changeName action
export const changeName = (name: string) => dispatchUser((prev) => ({...prev, name}))

// components/User.tsx

import { useUserSelect, changeName } from 'state/user/index';

const User = () => {
  const user = useUserSelect();

  return (
    <div>
      <h1>{user.name}</h1>
      <img src={user.avatar} />
      <p>{user.email}</p>
      <button onClick={() => changeName('Raul P')}>Change name</button>
    </div>
  );
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT © raulpesilva

Changelog

All notable changes to this project will be documented in this file.

[Unreleased]

[1.2.32] - 2022-09-07

Fix

• error when create a state with createReStateMethods with initial value undefined or null

[1.2.31] - 2022-09-03

added

• add createReStateMethods
• add createReStateMethods tests

[1.2.30] - 2022-06-12

Added

• add setReStateInitialValue
• add resetReState

[1.2.29] - 2022-06-10

Added

• add onReStateChange
• add test to onReStateChange

[1.2.28] - 2022-02-19

Added

• add rollup build and separate core and react features
• minimize bundle size (depending on features imported)
• add more support to different bundlers and remove warning type on js

Breaking changes

• move import useReState to named exports (import useReState... -> import { useReState }...)

[1.1.16] - 2021-06-23

Breaking changes

• new createReStateSelect is CreateGetReState (is the same old interface)

Added

• add change log
• add createGetReState (like old createReStateSelect)
• add advanced example
• export all types

Fixed

• fix createReState select to return a hook
• useReStateSelector is equal params

Changed

• convert createReStateSelect to observe one state in the store
• Update Readme
• Update types in documentation - useReStateSelector

[1.1.14] - 2021-05-19

Added

• add reStateSelect
• example
• docs
• advanced example
• demo basic usage