Recoil types

To a second type parameter to selector of Recoil.

Installation

To use Recoil Types with your app, install it as a dependency:

1# If you use npm:
2npm install recoil-types
3
4# Or if you use Yarn:
5yarn add recoil-types

Example

Create a userStore.ts store file.

1import { mapReducer, MapActions } from 'recruit';
2import { atom, selector, DefaultValue } from 'recoil';
3
4export interface User {
5  id: number;
6  name: string;
7}
8
9export type UserState = User | null;
10
11export type UserActions = MapActions<UserState>;
12
13export const initialState: UserState = null;
14
15export const $userState = atom<UserState>({
16  key: '$userState',
17  default: initialState,
18});
19
20export const userState = selector<UserState, UserActions>({
21  key: 'userState',
22  get: ({get}) => get($userState),
23  set: ({get, set, reset}, action) => {
24    if (action instanceof DefaultValue) {
25      return reset($userState);
26    }
27
28    return set($userState, mapReducer(get($userState), action));
29  },
30});

Create a MyComponent.tsx store file.

1import { useRecoilState } from 'recoil';
2import { userState } from './userStore';
3
4export default function MyComponents() {
5  const [user, dispatch] = useRecoilState(userState);
6
7  const set = () => {
8    dispatch({
9      type: 'set',
10      payload: {id: 1, name: 'recoil'}
11    });
12  };
13  const merge = () => {
14    dispatch({
15      type: 'merge',
16      payload: {name: 'sanonz'}
17    });
18  };
19
20  return (
21    <div>
22      <p>{JSON.stringify(user)}</p>
23      <button onClick={set}>Set</button> | <button onClick={merge}>Merge</button>
24    </div>
25  );
26}

Issues

If you find a bug, please file an issue on our issue tracker on GitHub.

License

MIT