pe-johndpope / re-state

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: '[email protected]',
            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