Skip to main content

Extend Functionality

1. Setting up the Store​

The store is set up in src/client/src/store/index.ts. It uses Redux Toolkit's configureStore method to create the store.

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./commonReducer";

const store = configureStore({
  reducer: rootReducer,
});

2. Reducers​

Reducers are defined in separate files like commonReducer.ts, libraryReducer.ts, and projectReducer.ts. They handle state changes based on actions.

// commonReducer.ts
import { createSlice } from "@reduxjs/toolkit";

const commonSlice = createSlice({
  name: "common",
  initialState: {},
  reducers: {
    // Your reducers here
  },
});

3. Actions​

Actions are automatically generated by Redux Toolkit's createSlice method.

export const { someAction } = commonSlice.actions;

4. Hooks​

Custom hooks are defined in hooks.ts for easier interaction with the store.

// hooks.ts
export const useAppDispatch = () => useDispatch<AppDispatch>();

5. Selectors​

Selectors are defined in selectors.ts to read specific pieces of state.

// selectors.ts
export const selectCommon = (state: RootState) => state.common;

6. API Calls​

API calls are made using Axios and are defined in .api.ts files like common.api.ts.

// common.api.ts
export const fetchSomething = () => axios.get("/some/endpoint");

7. Saga​

Saga is used for side effects and is defined in saga.ts.

// saga.ts
function* watchFetchSomething() {
  yield takeLatest(fetchSomething.type, fetchSomethingSaga);
}