CODEWITHSUNDEEP
reactjsredux-toolkit
Ali Mozaffari
Ali Mozaffari

Reputation: 1

How to get Data from api using axios in redux-toolkit

I am new in redux and redux-toolkit. I am trying to get data from api. I get error and can not receive data from api. I am using redux-toolkit library.

This is my App.js:

function App() {

  const companies = useSelector(state => state.companyList);
console.log(companies)
  return (
    <div className="App">
      <header className="App-header">
        {companies.map(company => {
          return(
            <h1>{company.name}</h1>
          )
        })}
        <h1>hello</h1>

      </header>
    </div>
  );
}

export default App;

This is createSlice.js

const getCompanies = axios.get(
  "https://mocki.io/v1/d4867d8b-b5d5-4a48-a4ab-79131b5809b8"
).then((response) => {
    console.log(response.data)
    return response.data;
}).catch((ex) => {
    console.log(ex)
})


export const companySlice = createSlice({
  name: "companyList",
  initialState: {value: getCompanies},
  reducers: {
    addCompnay: (state, action) => {},
  },
});

export default companySlice.reducer;

Here is store.js

import { configureStore } from "@reduxjs/toolkit";
import companyReducer from "./features/companySlice/compnayList";

export const store = configureStore({
    reducer:{
        companyList: companyReducer, 
    }
})

In the browser, I receive this error: enter image description here

Upvotes: 0

Views: 14171

Answers (3)

Mehdi Azizi
Mehdi Azizi

Reputation: 1

Finally, you should do the App.js file as follows

In App.js:

import { useSelector } from "react-redux";

import { selectCompanies } from "WHEREEVER selectCompanies IS EXPORTED FROM";

function App() {
  const dispatch = useDispatch()
  // Company list state
  const companies = useSelector(selectCompanies);

  useEffect(() => {
    dispatch(getCompanies())
  }, []);


  // Rest of the code
  .....
  .....
  .....
  .....
}

export default App;

Upvotes: 0

Allen
Allen

Reputation: 1

I used addMatcher instead of addCase to get it working. As described here: https://redux-toolkit.js.org/api/createAsyncThunk

Upvotes: 0

Nima Zarei
Nima Zarei

Reputation: 1222

You are making a lot of mistakes here so be sure to check out some tutorials and docs: https://redux-toolkit.js.org/tutorials/quick-start

You need to use createAsyncThunk and handle the response in extraReducers: https://redux-toolkit.js.org/rtk-query/usage/migrating-to-rtk-query#implementation-using-createslice--createasyncthunk

In companySlice:

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

export const getCompanies = createAsyncThunk(
  "companyList/getCompanies", 
  async () => {
    try {
      const response = await axios.get(
        "https://mocki.io/v1/d4867d8b-b5d5-4a48-a4ab-79131b5809b8"
      );
      return response.data;
    } catch (error) {
      console.error(error);
    }
});

const companySlice = createSlice({
  name: "companyList",
  initialState: {
    company: {},
    isLoading: false,
    hasError: false
  },
  extraReducers: (builder) => {
    builder
      .addCase(getCompanies.pending, (state, action) => {
      state.isLoading = true;
      state.hasError = false;
    })
      .addCase(getCompanies.fulfilled, (state, action) => {
        state.company = action.payload;
        state.isLoading = false;
        state.hasError = false
      })
      .addCase(getCompanies.rejected, (state, action) => {
        state.hasError = true
        state.isLoading = false;
      })
  }
});

// Selectors
export const selectCompanies = state => state.companyList.company;
export const selectLoadingState = state => state.companyList.isLoading;
export const selectErrorState = state => state.companyList.hasError;

export default companySlice.reducer;

Then you import selectCompanies wherever you want to use it and access it with useSelector.

In App.js:

import { useSelector } from "react-redux";

import { selectCompanies } from "WHEREEVER selectCompanies IS EXPORTED FROM";

function App() {
  // Company list state
  const companies = useSelector(selectCompanies);

  // Rest of the code
  .....
  .....
  .....
  .....
}

export default App;

Upvotes: 8

Related Questions