如何使用redux-toolkit中的axios从api获取数据

Question

我是 redux 和 redux-toolkit 的新手。我正在尝试从 api 获取数据。 我收到错误并且无法从 api 接收数据。我正在使用 redux-toolkit 库。

这是我的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;

这是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;

这里是store.js

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

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

在浏览器中，我收到此错误：

Answer 1

您在这里犯了很多错误，因此请务必查看一些教程和文档：https://redux-toolkit.js.org/tutorials/quick-start

您需要使用

createAsyncThunk

并处理

extraReducers

中的响应： https://redux-toolkit.js.org/rtk-query/usage/migration-to-rtk-query#implementation-using-createslice- -创建asyncthunk

在

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;

然后您将

selectCompanies

导入到您想要使用的任何地方，并使用

useSelector

访问它。

在

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;

Answer 2

我使用

addMatcher

而不是

addCase

来让它工作。如此处所述：https://redux-toolkit.js.org/api/createAsyncThunk