npm install @raulpesilva/re-state
or
yarn add @raulpesilva/re-state
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',
},
});
// 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>
);
};
// 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>
)
}
// 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>
);
};
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT ยฉ raulpesilva