
## [#](#setup) Setting up state with reduxjs-toolkit for a Tasks app 

### Define types

```typescript

// global.d.ts

type Task = {
  id: string;
  title: string;
  user?: User['id'];
  status?: Status['id']; 
};

type User = {
  id: string;
  name: string;
  tasks: Task['id'][];
};

type Status = {
  id: string;
  tasks: Task['id'][];
  title: Status;
};

type Status =
  | 'Backlog'
  | 'Ready'
  | 'In Progress'
  | 'Under Verification'
  | 'Ready to Deploy'
  | 'Deployed';

```

### Define slices

#### Tasks slice

The `TasksState` is defined as follows:

```typescript

// tasks-slice.ts

type TasksState = {
  entities: Task[];
};

```

Let's define the tasks slice as follows:

```typescript

// tasks-slice.ts

import { createSlice } from "@reduxjs/toolkit";

const initialState: TasksState = {
  entities: [],
};

const tasksSlice = createSlice({
  name: 'tasks',
  initialState,
  reducers: {
    addTask: (state, action: PayloadAction<Task>) => {
      state.entities.unshift(action.payload);
    },
    removeTask: (state, action: PayloadAction<Task['id']>) => {
      const index = state.entities.findIndex(task => task.id === action.payload);
      state.entities.splice(index, 1);
    },
  },
});

export default tasksSlice;

```

This will auto-generate actions for us, for example, let's consider adding a task. To do this, we call the function `tasksSlice.actions.addTask` with type as follows:

```typescript

addTask(payload: Task): {
  payload: Task;
  type: "tasks/addTask";
}

```

#### Users slice

```typescript

// users-slice.ts

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { nanoid } from "nanoid";

export type UserState = {
  entities: User[];
}

const initialState: UserState = {
  entities: [],
};

type DraftUser = RequireOnly<User, 'name'>;
type UpdateUser = RequireOnly<User, 'id'>;  

const createUser = (draftUser: DraftUser): User => {
  return { id: nanoid(), tasks: [], ...draftUser };
};

const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {
    addUser: (state, action: PayloadAction<DraftUser>) => {
      const user = createUser(action.payload);
      state.entities.unshift(user);
    },
    editUser: (state, action: PayloadAction<UpdateUser>) => {
      const index = state.entities.findIndex(user => user.id === action.payload.id);
      const { name } = state.entities[index];
      state.entities[index] = {
        ...state.entities[index],
        name: action.payload.name ?? name,
      };
    },
    removeUser: (state, action: PayloadAction<User['id']>) => {
      const index = state.entities.findIndex(user => user.id === action.payload);
      state.entities.splice(index, 1);
    },
  }
})

export default usersSlice;

```

Find out more about `RequireOnly` in [Redux: Useful TypeScript types](/article/2023/redux:-useful-typescript-types).


### Define reducer

#### Tasks reducer

```typescript

// tasks-slice.ts

export const tasksReducer = tasksSlice.reducer;

```

#### Users reducer

```typescript

// users-slice.ts

export const usersReducer = usersSlice.reducer;

```

### Export action types

#### Tasks actions

```typescript

// tasks-slice.ts

export const { addTask, removeTask } = tasksSlice.actions;

```

#### Users actions

```typescript

// users-slice.ts

export const { addUser, removeUser, editUser } = usersSlice.actions;

```

## [#](#adding-custom-action-types) Adding custom action types

### What if we want to have custom action types unlike the auto-generated ones?

We can use the functions `createAction` and `createReducer` to achieve the same. `createAction` is a standard way of making an action creator.

> An action creator is a function that formats the action that you had to dispatch..

Let's define action creators as follows:

```typescript

import { createAction } from "@reduxjs/toolkit";

// the second argument to `createAction` is optional
const addTask = createAction('ADD_TASK', (task: Task) => ({
  payload: task,
}));

const removeTask = createAction('REMOVE_TASK', (taskId: number) => ({
  payload: task,
}));

```

Type of `addTask` is as follows:

```typescript

ActionCreatorWithPreparedPayload<[task: Task], Task, "ADD_TASK", never, never>

```

Dispatching the action is as simple as calling the above function with the payload.

```typescript

const task1 = addTask(taskPayload);

```

Here, `task1` turns out to be of type:

```typescript

{
  // type for `payload` is undefined 
  // if second argument to `addTask` is not passed
  payload: Task;
  type: 'ADD_TASK';
}

```

We can use `addTask.type` which turns out to be `"ADD_TASK"` in reducer for checking on the action's type.

Next, let's define the reducer with `createReducer` as follows:

```typescript

import { createReducer } from "@reduxjs/toolkit";

const tasksReducer = createReducer({
  initialState: {
    entities: [],
  },
  /**
   * `builder` has three properties:
   * - addCase
   * - addDefaultCase
   * - addMatcher
   */
  builder => {
    // Both state and action will be automatically typed.
    builder.addCase(addTask, (state, action) => {
      /**
       * Type of state is
       * WritableDraft<{ entities: Task[] }>
       */
      state.entities.unshift(action.payload);
      // No return statement for state, @reduxjs/toolkit takes care of it
    });

    builder.addCase(removeTask, (state, action) => {
      const index = state.entities.findIndex(task => task.id === action.payload);
      state.entities.splice(index, 1);
    });
  }
})

```

### Use the reducer in a React component

```typescript

const [state, dispatch] = useReducer(tasksReducer, initialState);

// state.entities => Tasks list
// dispatch(addTask(task1)) => Dispatch action to create a new task

```

## [#](#configuring-store) Configuring store

`reduxjs-toolkit` provides `configureStore` to create a store.

```typescript

// store.ts

import { configureStore } from "@reduxjs/toolkit";

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

export default store;

```

## [#](#use-with-react-app) Use with React app

```typescript

import { Provider } from 'react-redux';
import store from './store';

...

root.render(
  ...
    <Provider store={store}>
      <Application />
    </Provider>
  ...
);

...

```
