handy-reduxy-utils
v1.0.2
Published
A set of handy & typed redux utils.
Downloads
6
Maintainers
Readme
handy-redux-utils
A set of handy & typed redux utils.
Install
npm i handy-redux-utils
Example Usage
import { takeLatest, call, put } from 'redux-saga';
import {
createActionCreator,
createEmptyActionCreator,
createInitialState,
createReducer,
reduceAction,
} from 'handy-redux-utils';
type LoginResponse = {
token: string;
user: {
id: string;
};
};
type Credentials = {
email: string;
password: string;
};
// Use `createActionCreator<T>(name)` for action with payload
const loginRequestAction = createActionCreator<Credentials>('user/LOGIN_REQUEST');
const loginSuccessAction = createActionCreator<LoginResponse>('user/LOGIN_SUCCESS');
// Use `createEmptyActionCreator()` for action without payload
const logoutAction = createEmptyActionCreator('user/LOGOUT');
type UserState = {
profile?: {
id: string;
email: string;
};
};
// Use `createInitialState<T>(initialState)` to define initial state
const initialUserState = createInitialState<UserState>({
profile: undefined,
});
// Use `createReducer(state, ...actionsReducers)`
// and `reduceAction(action, (state, payload) => nextState)` to reduce actions
const user = createReducer(
initialUserState.profile,
reduceAction(loginSuccessAction, (_, { user: profile }) => profile),
reduceAction(logoutAction, () => undefined)
);
// Use `action.guard` for action pattern-matching in sagas
const login = takeLatest(loginRequestAction.guard, function*({ payload }) {
try {
const resp: LoginResponse = yield call(api.login, payload.email, payload.password);
yield put(loginSuccessAction(resp));
} catch {
console.error('Failed to login.');
}
});
export function* userSaga() {
yield login;
}