# States and Selectors

```
|-/redux
    |
    |-/payroll
        |- index.ts
        |- payrollSlice.ts
        |- payrollThunks.ts
```

<details>

<summary>Initial State</summary>

{% code title="payrollSlice.ts" %}

```typescript
initialState: SliceState = {
  accountsCompleteData: {
    accountsList: [],
    meta: {
      count: null,
      next_cursor: null,
    },
  },
  accountJobsData: {
    data: [],
    meta: {
      count: null,
      next_cursor: null,
    },
  },
  accountPaystubsData: {
    data: [],
    meta: {
      count: null,
      next_cursor: null,
      refreshed_at: null,
    },
  },
  isLoadingAccountsUserData: false,
};
```

{% endcode %}

</details>

<details>

<summary>Selectors</summary>

* **getAccountsComplete:** This selector gets the complete list of the accounts of the user.
* **getAccountsNextCursor:** This selector helps with the pagination of the accounts list.
* **getIsLoadingAccountsUserData:** This selector helps to know when data related to the payroll flow is loading.
* **getAccountJobs:** This selector gets the list of the movements of the current account.
* **getJobsCursor:** This selector helps with the pagination of the jobs list.
* **getAccountPaystubs:** This selector gets the list of the receipts of the current account.
* **getPaystubsCursor:** This selector helps with the pagination of the receipts list.

</details>

### How to get the user accounts?

Invoke `fetchUserAccounts` from `LinkerStudio/modules/payroll/common/redux/payroll` using the hook `useAppDispatch` from `LinkerStudio/core/hooks`&#x20;

```typescript
import {useAppDispatch} from 'LinkerStudio/core/hooks';

const dispatch = useAppDispatch();

dispatch(fetchUserAccounts(params));
```

### How to get movements?

Invoke `fetchJobs` and `fetchMoreJobs` from `LinkerStudio/modules/payroll/common/redux/payroll` using the hook `useAppDispatch` from `LinkerStudio/core/hooks`&#x20;

```typescript
import {useAppDispatch} from 'LinkerStudio/core/hooks';

const dispatch = useAppDispatch();

dispatch(fetchJobs());
dispatch(fetchMoreJobs(params));
```

Where params are:

```typescript
cursor: string; // Used for fetchMoreJobs
```

### How to get receipts?

Invoke `fetchPaystubs` and `fetchMorePaystubs` from `LinkerStudio/modules/payroll/common/redux/payroll` using the hook `useAppDispatch` from `LinkerStudio/core/hooks`

```typescript
import {useAppDispatch} from 'LinkerStudio/core/hooks';

const dispatch = useAppDispatch();

dispatch(fetchPaystubs(params));
dispatch(fetchMorePaystubs(params));
```

Where params are:

```typescript
dateFrom: Date;
dateTo: Date;
cursor: string; // Used for fetchMorePaystubs
```