Redux As Repo

This library provides utility functions to deal with redux without the boilerplate.

Usage Examples on CodeSandbox

Installation

npm i redux-as-repo
# using yarn
yarn add redux-as-repo

Usage

import { repoReducer } from 'redux-as-repo';

// in your rootReducer, add the repoReducer

combineReducers({
	repository: repoReducer,
});

// or if you are using a reducer registry

reducerRegistry.register('repository', repoReducer);

import { all, fork } from 'react-sagas/effects';
import { createRepoSaga } from 'redux-as-repo';
import { axiosInstance } from 'your/axios/instance';

// in your rootSaga, create repoSaga


const handleResponse = (axiosData) => {
	if (...){
		return ...
	}
	return ...
}

const repoSaga = createRepoSaga(axiosInstance, handleResponse);

export default function* rootSaga() {
	yield all([fork(repoSaga)]);
}

createRepoSaga takes 2 arguments:

1. axiosInstance which is required
2. response handler: optional (if your backend has fixed format to return data, you can create a handler that returns a portion of response and store it inside the key data)

{
	"result": [],
	"status": "success",
	"errorMessage": "...",
	"errorCode": "..."
}

if you need just result, define a response handler and pass it to createRepoSaga

const handleResponse = data => {
	if (status === 'success') {
		return data.result;
	} else throw new Error(data.errorMessage);
};

Throwing an error will cause a FETCH_ERROR action to be dispatched

Common Action Creators

| actionCreator | args | saga effect | Description | | ------------------ | --------------- | ------------- | ------------------------------------------------------------------------------------------------- | | fetchInit | FetchOptions | takeEvery | Every action is handled by the repo reducer | | fetchLatest | FetchOptions | takeLatest | Only last resolved value will be taken into consideration by the repo reducer | | fetchFirst | FetchOptions | takeLeading | it blocks all upcoming actions FETCH_FIRST until the previous action is handled by repo reducer | | fetchNewInit | FetchOptions | takeEvery | same as fetchInit but creates a new namespace template for each request | | fetchClear | string | None | No Saga effect, will clear the namespace in question | | updateRepository | UpdateOptions | takeEvery | update/create new namespace with the resulting of compute method |

FetchOptions

repository slice in redux store handled by common action creators to store data.

| Property | Type | required | Description | | --------------------- | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | url | string | Yes | url | | namespace | string | Yes | where to store the dara inside repository | | config | AxiosRequestConfig | | Axios config object (method, data, params) | | successCb | Action Creator | | Function that takes response data as an argument and returns an action (data) => ({type:'SOME_ACTION', data}) | | errorCb | Action Creator | | same as successCb but will take error as callback argument | | autoClear | boolean | | will clear the namespace after success | | skipResponseHandler | boolean | | if you are using response handler that you want to disable for this specific request , pass this option as true | | selector | Function | | A selector that returns an object with the desired to be formatted keys: state => ( { projectId: state.projectId }) const url = '/randomLink/{projectId}' projectId will be replaced therefore by the value coming from the selector |

export function fetchProjects() {
	return fetchInit(({
	 	url,
		namespace: 'projects'
	}));
}


//in your YourComponent
import { useDispatch } from 'react-redux';
import { fetchProjects } from 'path/of/your_redux_actions';

const MyComponent = () => {
	const dispatch = useDispatch()

	useEffect(() => {
	  dispatch(fetchProjects())
	},[])

	return (...)
}

1. dispatch action of type : @repo-as-reducer/FETCH_INIT
2. an xhr call to url with options provided
3. response data will be stored inside repository.projects

data is stored in this format

    {
        repository: {
            projects: {
                data: [...],
                error: false,
                loading: false,
                success: true,
                trace: null,
            }
        }
    }

updateRepository

Use this common action creator for creating a new namespace or updating an existing namespace.

UpdateOptions

UpdateOptions {
	namespace: string;
	compute: (namespaceState: undefined | NamespaceState) => NewNamespaceState;
}

Usage

function updateProject(newValue) {
	return updateRepository({
		namespace: 'projects',
		compute: oldNamespaceState => ({
			...oldNamespaceState,
			key: newValue,
		}),
	});
}

Selectors

to get stored data by namespace use getData(namespace) this will create a memoized selector.

// store/YourComponent/index.ts

import { getData, getLoadingState } from 'redux-as-repo';

const dataSelector = getData(namespace);
const loadingStateSelector = getLoadingState(namespace);

// YourComponent/index.tsx
const data = useSelector(dataSelector);
const isLoading = useSelector(loadingStateSelector);

useNamespace as a custom hook

To get namespace data without using selectors, a custom hook is there for you

import { useNamespace } from 'redux-as-repo';

const { data, error, loading } = useNamespace({
	namespace: 'PROJECTS',
	onSuccess: callback,
	autoClear: true,
});

| Property | Type | required | Description | | ----------- | ---------- | ----------------- | ----------------------------------------------------------------------------- | | autoClear | boolean | default : false | clear namespace on component cleanup | | namespace | string | Yes | where namespace is saved | | onSuccess | callback | No | will be executed if namespace.success is true, data is passed to the callback |

Query Hooks Generation

To generate hooks ready to be used in the component

createNamespaceApi

| Property | Type | required | Description | | ----------- | -------- | -------- | ------------------------------------------------------------ | | namespace | string | Yes | base namespace where to store data {namespace}_{queryName} | | queries | Hook | Yes | object that holds all queries methods |

interface Hook {
	[key: string]: {
		query: (...args: any[]) => string | HookFetchOptions;
		effect?: `${FetchEffect}`;
		fetchOnMount?: boolean;
	};
}

interface HookFetchOptions {
	url: string;
	config: AxiosRequestConfig;
}

export enum FetchEffect {
	New = 'new',
	First = 'first',
	Latest = 'latest',
	Init = 'init',
}

Generated Hook ReturnType

interface HookResult extends NamespaceState {
	namespace: string;
	refetch: (...args: any[]) => void;
}

export type NamespaceState = {
	data: any;
	error: boolean;
	loading: boolean;
	success: boolean;
	trace: null | string;
	fullError: null | any;
};

Usage

import { createNamespaceApi, FetchEffect } from 'redux-as-repo';

const hooks = createNamespaceApi({
	namespace: 'todos',
	queries: {
		getTodo: {
			query: () => 'todos',
			effect: FetchEffect.First,
			fetchOnMount: true,
		},
		getTodoById: {
			query: id => `todos/${id}`,
		},
		addTodo: {
			query: data => ({
				url: '/todos',
				config: {
					method: 'post',
					data,
				},
			}),
		},
	},
});

export const { useGetTodo, useGetTodoById, useAddTodo } = hooks;

// Component.tsx
...
const [state, setState] = useState(false);
const [id, setId] = useState(1);

const { data, loading, error, refetch } = useGetTodo({
	autoClear: true,
	onSuccess: console.log,
	deps: [state],
});

const { refetch: getTodoById } = useGetTodoById(id, {
	deps: [id, state],
});

const { refetch: addTodo } = useAddTodo({ key: 'value' });

interface HookOptions {
	autoClear?: boolean;
	deps: any[];
	onSuccess: (data: NamespaceState) => any;
}