Redux Toolkit - 调度时未定义额外的 reducer 方法答案

【问题标题】：Redux Toolkit - An extra reducer method is undefined on dispatchRedux Toolkit - 调度时未定义额外的 reducer 方法
【发布时间】：2021-10-26 16:15:59
【问题描述】：

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

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

我做错了什么？

【问题讨论】：

您是否有机会将商店导入到代码库中的其他文件中？

标签： reactjs react-native redux redux-toolkit

【解决方案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

【讨论】：

非常感谢。我认为该函数可以简单地从切片本身中导出。这在文档中没有发现。