Welcome to SafeFramework!

A set of Immutable Maps, Actions and constants that will help you with your React Hooks project!

Requirements

You need these libraries installed in your project

• ReactJS
• Redux
• Redux Saga
• ImmutableJS

How to install

1- Add safe: SafeFramework.reducer, to your root reducer

Example:

const rootReducer = combineReducers({
  global: globalReducer,
  safe: SafeFramework.reducer,
});

2- Add fork(SafeFramework.saga) to your rootSaga

Example:

export default function* rootSaga() {
  yield all([fork(globalSagas), fork(SafeFramework.saga)]);
}

3- Initialize the app and set your settings

Use the SafeFramework.updateOptions() function to set your Axios preferred settings. It accepts the same default settings for Axios. In the example below, we present it with a JWT token in the Authorization header and we set a baseURL for our server.

We advise you to do the same, at least for the baseURL settings.

export default function InitApp() {
  // init SafeFramework
  const publicAxiosOptions: AxiosRequestConfig = {
    baseURL: Config.SERVER_URL,
    withCredentials: true,
  };
  let token = getCookie(Config.JWT_COOKIE_NAME!);
  if (token) {
    publicAxiosOptions.headers = {
      Authorization: token,
    };
  }

  SafeFramework.updateOptions({
    publicAxiosOptions,
  });
  RegisterGlobalAPIs();
}

4- Register Your APIs in a file that gets executed as soon as the App initiates or whenever you lazy load a component

In the example above you notice that we made a call to RegisterGlobalAPIs() function, this is how it looks like:

const  RegisterGlobalAPIs = () => {
const { builderConsts } = useBuilderActionsConstants();
const  c = combineConstants(builderConsts);
SafeFramework.api.register([
{
name:  c.LOGIN,
val: {
method:  'POST',
path:  '/auth/signin',
},
}, ...]);
};
export  default  RegisterGlobalAPIs;

Another example:

const _playList = () => {
  SafeFramework.api.register([
    {
      name: c.MY_PLAYLIST + c.GET,
      val: {
        method: "GET",
        path: "/playlist",
      },
    },
  ]);
};