@raulpesilva/re-state
v1.2.32TypeScript
easy way to create a shared state to the entire application
0/weekUpdated 3 years agoMITUnpacked: 119.3 KB
Published by raulpesilva
npm install @raulpesilva/re-state
Easy way to provide global state to ReactJS and React Native applications
Installation
``sh`
npm install @raulpesilva/re-state
or
`sh`
yarn add @raulpesilva/re-state
See documentation - 
Simple Usage - 
`tsx
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
return (
);
};
const Bar: React.FC = () => {
const [value] = useReState
return (
);
};
export default function App() {
return (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
`
Advanced Usage
Creating new global state
`ts
// 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
export const useUserSelect = createReStateSelect
export const dispatchUser = createReStateDispatch
export const getUser = createGetReState
export const resetUser = () => dispatchUser(userInitialValue);
`
`tsx
// components/User.tsx
import { useUser } from 'state/user';
const User = () => {
const [user, setUser] = useUser();
return (
{user.name}
{user.email}
setUser({
_id: '123',
name: 'Raul',
email: 'raul@email.com',
iat: 123,
avatar: 'https://github.com/raulpesilva.png',
})
}
>
Set User
);
};
`
Using previous state
tsx
// components/User.tsx import { useUser } from 'state/user'
const User = () => {
const [user, setUser] = useUser()
return (
{user.name}
{user.email}
)
}`or
tsx
// components/User.tsx import { useUserSelect, useUserDispatch } from 'state/user/index'
const User = () => {
const user = useUserSelect()
return (
{user.name}
{user.email}
)
}`Adding changeName action
ts
// state/user/index.ts
...
export const dispatchUser = createReStateDispatch(USER)
export const getUser = createGetReState(USER)
export const resetUser = () => dispatchUser(userInitialValue)
// + adding changeName action
export const changeName = (name: string) => dispatchUser((prev) => ({...prev, name})) `tsx
// components/User.tsximport { useUserSelect, changeName } from 'state/user/index';
const User = () => {
const user = useUserSelect();
return (
{user.name}
{user.email}
);
};
``Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT © raulpesilva