Recoil types
To a second type parameter to selector of Recoil.
Installation
To use Recoil Types with your app, install it as a dependency:
# If you use npm:
npm install recoil-types
# Or if you use Yarn:
yarn add recoil-types
Example
Create a userStore.ts store file.
import { mapReducer, MapActions } from 'recruit';
import { atom, selector, DefaultValue } from 'recoil';
export interface User {
id: number;
name: string;
}
export type UserState = User | null;
export type UserActions = MapActions<UserState>;
export const initialState: UserState = null;
export const $userState = atom<UserState>({
key: '$userState',
default: initialState,
});
export const userState = selector<UserState, UserActions>({
key: 'userState',
get: ({get}) => get($userState),
set: ({get, set, reset}, action) => {
if (action instanceof DefaultValue) {
return reset($userState);
}
return set($userState, mapReducer(get($userState), action));
},
});
Create a MyComponent.tsx store file.
import { useRecoilState } from 'recoil';
import { userState } from './userStore';
export default function MyComponents() {
const [user, dispatch] = useRecoilState(userState);
const set = () => {
dispatch({
type: 'set',
payload: {id: 1, name: 'recoil'}
});
};
const merge = () => {
dispatch({
type: 'merge',
payload: {name: 'sanonz'}
});
};
return (
<div>
<p>{JSON.stringify(user)}</p>
<button onClick={set}>Set</button> | <button onClick={merge}>Merge</button>
</div>
);
}
Issues
If you find a bug, please file an issue on our issue tracker on GitHub.
License
MIT
