CODEWITHSUNDEEP
redux
eric_heim
eric_heim

Reputation: 61

extraReducers in createSlice() in Redux Toolkit

Here's the example code from Codecademy:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { client } from '../api';
 
const initialState = {
  todos: [],
  status: 'idle'
};
 
export const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {
  const response = await client.get('/todosApi/todos');
  return response.todos;
});
 
const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.todos.push(action.payload);
    }
  },
  extraReducers: {
    [fetchTodos.pending]: (state, action) => {
      state.status = 'loading';
    },
    [fetchTodos.fulfilled]: (state, action) => {
      state.status = 'succeeded';
      state.todos = state.todos.concat(action.payload);
    }
  }
});

I'm confused about what fetchTodos.pending and fetchTodos.fulfilled mean as computed properties. I don't see that fetchTodos has those attributes. What is going on?

Upvotes: 0

Views: 1755

Answers (1)

Michael Krøyserth-Simsø
Michael Krøyserth-Simsø

Reputation: 1044

Those are generated by createAsyncThunk

Check out the RDK docs on createAsyncThunk

Parameters# createAsyncThunk accepts three parameters: a string action type value, a payloadCreator callback, and an options object.

type
A string that will be used to generate additional Redux action type constants, representing the lifecycle of an async request:

For example, a type argument of 'users/requestStatus' will generate these action types:
pending: 'users/requestStatus/pending'
fulfilled: 'users/requestStatus/fulfilled'
rejected: 'users/requestStatus/rejected'

Upvotes: 1

Related Questions