react RTK app mock API 调用抛出与 reducer 相关的错误

react RTK app mock API call throwing error related to reducer

提问人:Meta Boost 提问时间:11/1/2023 更新时间:11/1/2023 访问量:20

问:

我正在使用 RTK 构建一个 react 应用程序,当我将模拟 api 导入应用程序时出现以下错误。

> redux.js:426 Store 没有有效的 reducer。确保传递给 combineReducers 的参数是其值为 reducers 的对象。

the error message which I am getting

我的代码如下。如果有人能告诉我我在这里做错了什么,对我更新自己很有用。


应用程序 JS

function App() {
  const dispatch = useDispatch();
 

  useEffect(() => {
    dispatch(getLorems());
  }, []);
 
  const lorem = useSelector((state) => state);
  console.log(lorem, "lorem");

  return (
    <div className="App">{JSON.stringify(lorem)}</div>
  )
}

export default App;


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

export const getLorems = createAsyncThunk(
  "getLorems",
  async (object, { getState, rejectWithValue }) => {
    console.log(getState());
    try {
      const { data } = await axios.get(
        "api goes here"
      );
      return data;
    } catch (error) {
      rejectWithValue(error.response);
    }
  }
);

const loremSlice = createSlice({
  name: "lorem",
  initialState: {
    data: [],
    loading: false,
    isSuccess: false,
    message: "",
  },
  reducers: {},
  extraReducers: {
    [getLorems.pending]: (state, action) => {
      state.loading = true;
    },
    [getLorems.fulfilled]: (state, { payload }) => {
      state.loading = false;
      state.data = payload;
      state.isSuccess = true;
    },
    [getLorems.rejected]: (state, { payload }) => {
      state.loading = false;
      state.isSuccess = false;
      state.message = "failed";
    },
  },
});

export default loremSlice; 

我尝试添加 API 并尝试将数据获取到 Redux,然后在应用程序中显示

javascript reactjs redux ecmascript-6 rtk

评论


答: 暂无答案