Problem with Redux Async data pulling from json server

Question

I have a simple react CRUD table application, where I have set up redux to do the add,delete and update function and now I am trying to pull the data from json server with redux. and here is how my slice looks like:

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


export const loadCustomers = createAsyncThunk("customer/load", async () => {
  const response = await fetch("http://localhost:8000/customers");

  const customers = await response.json();

  return { customers };
});

export const customerSlice = createSlice({
  name: "customers",
  initialState: { value: customers },
  reducers: {
    addCustomer: (state, action) => {
      state.value.push(action.payload);
    },

    deleteCustomer: (state, action) => {
      state.value = state.value.filter(customer => customer.id !== action.payload.id);
    },
    updateCustomer: (state, action) => {
      state.value.map(customer => {
        if (customer.id === action.payload.id) {
          customer.full_name = action.payload.full_name;
          customer.address = action.payload.address;
          customer.phone_number = action.payload.phone_number;
          customer.email = action.payload.email;
          customer.website = action.payload.website;
        }
      });
    },
  },
});

export const { addCustomer, deleteCustomer, updateCustomer } = customerSlice.actions;
export default customerSlice.reducer;

At the moment I am getting 'customers' is not defined no-undef when I try to use it in the Initial state. What is the correct way to get the data from the json server with redux

score 0 · Answer 1 · answered Nov 24 '22 at 11:59

Your initial state is before you load the data from the web server. So I assume it should be an empty Array or undefined:

initialState: { value: [] },

You probably need to ensure the customers are loaded and show an animation while they are loading. Since the web server may return a response after 20 seconds.

So then your initial state may become:

initialState: { value: [], loaded: false, fetching: false },

Another approach is to use a status variable as proposed in the createAsyncThunk

const loadingStatus = {
 idle: 'idle',
 pending: 'pending',
 succeeded: 'succeeded',
 failed: 'failed'
}

//...

initialState: { value: [], loading: loadingStatus.idle },

So in your example the result would be:

const loadingStatus = {
 idle: 'idle',
 pending: 'pending',
 succeeded: 'succeeded',
 failed: 'failed'
}

export const loadCustomers = createAsyncThunk("customer/load", async () => {
  const response = await fetch("http://localhost:8000/customers");

  const customers = await response.json();

  return { customers };
});

export const customerSlice = createSlice({
  name: "customers",
  initialState: { value: [], loading: loadingStatus.idle },
  reducers: {
   // ...
  },
  extraReducers: (builder) => {
    // Add reducers for additional action types here, and handle loading state as needed
    builder.addCase(loadCustomers.fulfilled, (state, action) => {
      state.value.push(action.payload.customers);
      state.loading = loadingStatus.succeeded
    })
  },
})

Problem with Redux Async data pulling from json server

1 Answers1