Redux 工具包 - 一个额外的 reducer 方法在调度时未定义

Question

使用显式 documentations，我使用 redux 工具包库提供的 createSlice() 方法构建了一个 'home' reducer，然后使用异步 API 调用来获取要约使用 createAsyncThunk 方法存储到 redux 状态。这是减速器的以下代码

import {createAsyncThunk, createSlice, PayloadAction} from '@reduxjs/toolkit';
import testService from '../../api/services/test.service';

const getOffers = createAsyncThunk(
  'home/getOffersStatus', //I tried changing the type string but to no avail
  async (thunkAPI) => {
    const res = await testService.getOffers();
    return res.data;
  },
);

const home = createSlice({
  name: 'home',
  initialState: {
    offers: {
      loader: false,
      data: null,
      err: null,
    },
  },
  reducers: {},
  extraReducers: builder => {
    builder.addCase(getOffers.fulfilled, (state, action) => {
      state.offers.data = action.payload
    });

  },
});

export default home.reducer;

接下来我在home.js里面调用了方法getOffers()。如下图：

import React, {useEffect} from 'react';
import {ScrollView, Text, View} from 'react-native';
import {Button, Icon} from 'react-native-elements';
import {useTheme, withTheme} from 'react-native-paper';
import {useDispatch} from 'react-redux';
import {GlobalStyles} from '../../constants/globalStyles';

const Home = ({navigation}) => {
  const theme = useTheme();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getOffers());  // <------- Problem Occurs Here
  }, []);

  return (
    <ScrollView
      style={GlobalStyles.bgScrollView}
      contentContainerStyle={(GlobalStyles.flex1, GlobalStyles.flexGrow)}>
      <View
        style={{flex: 1, margin: 40, marginTop: '30%', alignItems: 'center'}}>
        <Text textAlign="center">{'This is Home Screen'}</Text>
        <Button
          buttonStyle={GlobalStyles.buttonPrimary}
          title="Redeem Offer Screen >"
          onPress={() => {
            navigation.push('Redeem Offer');
          }}
        />
      </View>
    </ScrollView>
  );
};

export default withTheme(Home);

现在，当我调用调度程序时，出现以下错误：

Uncaught ReferenceError: getOffers is not defined at home.js:13

我做错了什么？

Answer 1

问题是由于 getOffers 函数没有从 home reducer 文件中导出，因此没有在 home.js 组件中导入。

您应该从您的家用减速器中导出 getOffers，例如：

export const getOffers = createAsyncThunk(

然后您应该将它导入到您的 home.js 组件中，例如：

import { getOffers } from 'path-to-your-home-reducer-js'; // the relative path to reducer

Redux 工具包 - 一个额外的 reducer 方法在调度时未定义

Redux Toolkit - An extra reducer method is undefined on dispatch

reactjs

react-native

redux

redux-toolkit