react-global-state-hooks

Installation

1$ yarn add @ethicdevs/react-global-state-hooks
2# or
3$ npm i @ethicdevs/react-global-state-hooks

Usage

See this CodeSandBox for a live editable demo. Or just run cd example && yarn && yarn start if you have cloned the repo already.

---

Add the GlobalStateProvider high enough in your tree so that children which needs state are into it.

1// src/App.tsx
2import React from "react";
3import { GlobalStateProvider } from "@ethicdevs/react-global-state-hooks";
4
5import { initialState, rootReducer } from "./state";
6
7const App = () => <>{/* Your app */}</>;
8
9const AppWithProviders = () => (
10  <GlobalStateProvider initialState={initialState} rootReducer={rootReducer}>
11    <App />
12  </GlobalStateProvider>
13);
14
15export default AppWithProviders;

Create a globalState.ts file at the root of your src/ folder, we will use the handy combineModules helper to quickly get started:

1// src/state/index.ts
2import { combineModules } from "@ethicdevs/react-global-state-hooks";
3
4import { AuthModule } from "./auth";
5import { HelloModule } from "./hello";
6
7// Auto export everything needed for the Provider
8export const { ActionTypes, rootReducer, initialState } = combineModules({
9  auth: AuthModule,
10  hello: HelloModule,
11});

Next we can create our AuthModule and HelloModule by creating two set of folders with such structure (makes life easier):

For each module, you choose a "modKey", for example here "auth" and "hello" and then use this for folder names, and state keys (see above in combineModules argument 1, keys are modKey's), this allows to "split" the global store into smaller much more manageable objects

• src/
  • components/
  • state/
    • index.ts # where we export our combined modules
    • auth/
      • actionTypes.ts
      • index.ts
      • reducer.ts
      • selectors.ts
    • hello/
      • actionTypes.ts
      • index.ts
      • reducer.ts
      • selectors.ts

The index.ts file in each module is where we compose and export the module itself:

1// src/state/auth/index.ts
2import { StateModule } from "@ethicdevs/react-global-state-hooks";
3
4import type { AuthState } from "./reducer";
5
6import { ActionTypes, modKey } from "./actionTypes";
7import { initialState, reducer } from "./reducer";
8
9// re-exports selectors for easy import in components
10export * from "./selectors";
11
12// export module for use in src/state/index.ts
13export const AuthModule: StateModule<AuthState> = {
14  key: modKey,
15  actionTypes: ActionTypes,
16  initialState,
17  reducer,
18};

Let's defined some action types we'll implement in our reducer' in a second:

1// src/state/auth/actionType.ts
2import { actionType } from "@ethicdevs/react-global-state-hooks";
3
4// Module key.
5export const modKey = "auth";
6
7// Types of actions for this module
8export const ActionTypes = Object.freeze({
9  RESET: actionType("RESET"),
10  SIGN_IN_REQUEST: actionType("SIGN_IN_REQUEST", modKey),
11  SIGN_IN_SUCCESS: actionType("SIGN_IN_SUCCESS", modKey),
12  SIGN_IN_FAILURE: actionType("SIGN_IN_FAILURE", modKey),
13  // or shorter:
14  ...makeThunkActionType("SIGN_OUT", modKey),
15  // SIGN_OUT_REQUEST: auth/SIGN_OUT_REQUEST
16  // SIGN_OUT_SUCCESS: auth/SIGN_OUT_SUCCESS
17  // SIGN_OUT_FAILURE: auth/SIGN_OUT_FAILURE
18});

We can now define our reducer, using React built-in useReducer

1// src/state/auth/reducer.ts
2import { Reducer } from "react";
3import {
4  FluxBaseState,
5  FluxStandardAction,
6} from "@ethicdevs/react-global-state-hooks";
7
8import { ActionType, ActionTypes } from "./actionTypes";
9
10export type User = {
11  id: string;
12  name: string;
13};
14
15export interface AuthState extends FluxBaseState {
16  authenticated: boolean;
17  errorMessage: null | string;
18  loading: boolean;
19  user: User | null;
20}
21
22// Initial state
23export const initialState: AuthState = {
24  authenticated: false,
25  errorMessage: null,
26  loading: false,
27  user: null,
28};
29
30export const reducer: Reducer<AuthState, FluxStandardAction<ActionType>> = (
31  state,
32  action,
33) => {
34  switch (action.type) {
35    case ActionTypes.SIGN_IN_REQUEST: {
36      return {
37        ...state,
38        authenticated: false,
39        errorMessage: null,
40        loading: true,
41        user: null,
42      };
43    }
44    case ActionTypes.SIGN_IN_SUCCESS: {
45      const { user } = action.payload as { user: User };
46      return {
47        ...state,
48        authenticated: true,
49        errorMessage: null,
50        loading: false,
51        user,
52      };
53    }
54    case ActionTypes.SIGN_IN_FAILURE: {
55      const { errorMessage } = action.payload as { errorMessage: string };
56      return {
57        ...state,
58        authenticated: false,
59        errorMessage,
60        loading: false,
61        user: null,
62      };
63    }
64    case ActionTypes.RESET: {
65      return initialState;
66    }
67    default: {
68      return state;
69    }
70  }
71};

And finally some selectors so its easy to retrieve data in the components:

1// src/state/auth/selectors.ts
2import { FluxBaseState } from "@ethicdevs/react-global-state-hooks";
3
4import { AuthState } from "./reducer";
5
6type State = {
7  [x: string]: FluxBaseState;
8  auth: AuthState;
9};
10
11export const selectCurrentUser = (state: State) => {
12  return state.auth.user;
13};
14
15export const selectIsAuthenticated = (state: State) => {
16  return state.auth.authenticated;
17};
18
19export const selectIsAuthInProgress = (state: State) => {
20  return state.auth.loading;
21};
22
23export const selectAuthErrorMessage = (state: State) => {
24  return state.auth.errorMessage;
25};

---

See this CodeSandBox for a live editable demo.

Debug

react-global-state-hooks now has its own small devtool/debugger (cli/ui), so head over to @ethicdevs/react-global-state-hooks-debugger to learn more about installation and usage!

License

MIT