- clone repo
- navigate to project root folder
- install all dependencies with yarn or npm i
- run with yarn start or npm
$ git clone https://github.com/RandolphG/animafiAduana.git
$ cd project folder
$ yarn or npm i
$ yarn start or npm start
Application state is split mainly in three parts.
- System
- Properties
- Users
Each state structure will be defined by application requirements under that state. Fundamental pieces to build partial root state are:
- slice
- epics
- types
All of actions possible under that partial root state shall be placed here. This slice will create Reducer and its corresponding actions. Example:
const systemSlice = createSlice({
name: "system",
initialState: initState as SliceState,
reducers: {
requestLoginAction: (state, action: PayloadAction<IUserInput>) => {},
requestLoginSuccessAction: (state, action: PayloadAction<ISystemState>) => {
const { admin, status, token } = action.payload;
state.admin = admin;
state.status = status;
state.token = token;
},
requestCurrentUserActionSuccess: (
state,
action: PayloadAction<ICurrentUser>
) => {
const name = action.payload.name;
state.name = name;
},
requestLoginActionFailure: (state, action: PayloadAction<Error>) => {}
}
});
This is very redux-observable specific. I recommend going through RxJS first before understanding this. Refer the documentation links given above. Example code:
export const doLoginEpic: Epic<Action, Action, RootState> = action$ =>
action$.pipe(
filter(isActionOf(sourceActions.requestLoginAction)),
switchMap<Action, Observable<Action>>(action =>
from(doLogin(action.payload)).pipe(
map(sourceActions.requestLoginActionSuccess),
catchError(error => of(sourceActions.requestLoginActionFailure(error)))
)
)
);
All input and state interfaces can be placed here. Example:
export interface ISystemState {
readonly admin: Boolean;
readonly status: string;
readonly token: string;
readonly temp: string;
}
export interface IUserInput {
readonly username: string;
readonly password: string;
}