首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

尝试导入错误:'getMoviesList‘不是从’./actions‘中导出的;react redux中出错

问题分析

你遇到的错误提示表明在尝试从 ./actions 模块导入 getMoviesList 函数时失败了。这通常是由于以下几种原因之一:

  1. 模块路径错误./actions 路径不正确。
  2. 导出错误./actions 模块中没有正确导出 getMoviesList 函数。
  3. 拼写错误:导入语句中的函数名拼写错误。

解决方法

1. 检查模块路径

确保 ./actions 路径是正确的。假设你的项目结构如下:

代码语言:txt
复制
src/
├── actions/
│   └── index.js
├── components/
│   └── MovieList.js

那么 MovieList.js 中导入 getMoviesList 的语句应该是:

代码语言:txt
复制
import { getMoviesList } from '../actions';

2. 检查导出

确保 ./actions 模块中正确导出了 getMoviesList 函数。例如,在 actions/index.js 中:

代码语言:txt
复制
export const getMoviesList = () => {
  // 你的逻辑代码
};

3. 检查拼写

确保导入语句中的函数名拼写正确。例如:

代码语言:txt
复制
import { getMoviesList } from '../actions';

示例代码

假设你的 actions/index.js 文件内容如下:

代码语言:txt
复制
// actions/index.js
export const getMoviesList = () => {
  // 模拟获取电影列表的异步操作
  return fetch('https://api.example.com/movies')
    .then(response => response.json())
    .then(data => data.movies);
};

然后在 components/MovieList.js 中导入并使用:

代码语言:txt
复制
// components/MovieList.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getMoviesList } from '../actions';

const MovieList = () => {
  const dispatch = useDispatch();
  const movies = useSelector(state => state.movies);

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

  return (
    <div>
      <h1>Movies List</h1>
      <ul>
        {movies.map(movie => (
          <li key={movie.id}>{movie.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default MovieList;

参考链接

如果你仍然遇到问题,请提供更多的代码细节,以便进一步诊断问题。

相关搜索:尝试导入错误:'Model‘不是从'../module’导出的尝试导入时出错:'_‘不是从’下划线‘导出的尝试导入错误:'ApiRequests‘不是从'./ApiRequests’中导出的尝试导入错误:'SomeModule‘不是从’./some/path‘导出的;尝试导入错误:'OBJLoader‘不是从'three’导出的(导入为'THREE')尝试导入错误:'createGlobalStyle‘不是从'styled-components’导出的ReactJS TypeScript:尝试导入错误:'ActionButtonProps‘不是从'./ActionButton’中导出的./src/views/users/UserCreate.js尝试导入错误:'email‘不是从'./../validations’导出的无法从react应用程序中的redux库导入存储是否可以在.js文件中而不是.ts文件中使用React Antd图表?(尝试导入错误:'__spreadArray‘未从’tslib‘导出。)如何通过react中redux saga中的抛出错误来中断生成器函数无法从我的create-react-app中的'redux-saga‘导入createSagaMiddlewareReact从我的div中删除密钥,然后抛出错误从错误的位置导入react-chartjs-2中线如何从React中的封装函数外部导出/导入或访问封装函数中定义的函数?在jsx文件中从@testing library/react导入“render”是错误的导入文件夹中的所有json文件,而不是导入每个文件,然后在Create React App中导出?尝试从React -TypeError中的API中获取数据: recipes.map不是一个函数使用React从monorepo中的另一个包导入JSX文件时出错我一直收到此服务器错误-错误:默认导出不是页面中的React组件:"/products/all“
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【React】211- 2019 React Redux 完全指南

怎么把这些全都与 React 结合起来构建一个可运行的应用? 你可以花几个小时阅读博客以及尝试从复杂的“真实世界”应用中研习以将它拼凑起来。...学习 Redux,从简单 React 开始 我们将采用增量的方法,从带有组件 state 的简单 React 应用开始,一点点添加 Redux,以及解决过程中遇到的错误。...参加我免费的 5 天 React 课程,用简单的 React 获得信心,然后再回到这里。 跟上来! 最好的学习方式就是动手尝试!...从 React 组件 Dispatch Redux Actions 现在我们的 Counter 已经被 connect 了,我们也获取到了 count 值。.../rootReducer';// ...const store = createStore(rootReducer); Redux 中错误处理 这里的错误处理比较轻量,但是对大部分调用 API 的 actions

4.3K20
  • 使用Redux和React-redux在React中进行状态管理

    Redux遵循不变性,这意味着我们不改变应用程序状态,而不是返回 新的应用程序状态。 Redux在单个JavaScript对象中管理整个应用程序状态。...redux”库中导入了createStore函数,并从react-redux库中导入 Provider 组件。... 组件使用react context API通过组件树向下传递状态。 从组件访问Redux状态 现在我们可以直接从React组件访问我们的redux状态。...connect 从react-redux库中调用的高阶组件,然后使用state参数定义一个函数mapStatetoProps。...我们可以App作为来访问组件内部的这两个属性props。 现在让我们在浏览器中对其进行测试。 错误处理 我们还可以通过ERROR在reducer函数中创建一个类型来处理错误。

    2.9K30

    Redux与前端表格施展“组合拳”,实现大屏展示应用的交互增强

    将 Redux 添加到你的 React 应用程序 1.引入相关库 "@reduxjs/toolkit": "^1.9.1", "react-redux": "^7.2.0", "redux": "^4.0.5.../store/salesSlice'; 然后在创建的Dashboard方法体中,再加入下面的代码,其中react-redux 提供的: useSelector用于获取刚刚创建的state中的recentSales...如果您已经开发软件很长时间,您可能不止一次地从最终客户或者产品经理那里听到过这个灵魂拷问。对于非技术人群来说,觉得要求 Excel 导入/导出/展示是一个非常正常且容易实现的需求。...这也是我们在开始时使用将电子表格作为表格明细数据显示和编辑控件的原因。下面我们为应用加入Excel导入导出功能 导出为Excel文件 将 Excel 导入导出功能添加到工作表很容易。...数据不符时,也可以尝试给客户一个提示信息。 Excel导入导出效果 最终的项目可以参考下面的附件 https://gcdn.grapecity.com.cn/forum.php?

    1.7K30

    TS 常见问题整理(60多个,持续更新ing)

    undefined : a.b(); // 如果 a 是 null/undefined,那么返回 undefined // 如果 a.b 不是函数的话,会抛类型错误异常,否则计算 a.b() 的结果...,并且它的名字是由导入这个模块的代码指定,所以没有必要为导出的对象增加额外的模块层。...from 'react' 和 import React from 'react' 有什么区别 第一种写法是将所有用 export 导出的成员赋值给 React ,导入后用 React.xxx 访问 第二种写法仅是将默认导出...+ redux + react-redux 项目:在使用 mapStateToProps(state) 函数时,想要给仓库中的 state 声明类型 借助 ReturnType // rootReducer.ts...image.png 8. react + redux + react-redux 项目:想要给 action creator 函数声明类型 // 在 Mesh 组件中 import workActions

    15.4K77

    深入理解Redux数据更新机制:数据流管理的核心原理

    在Redux中,我们通过创建新的state对象来实现不可变性。当一个action触发数据更新时,reducer会返回一个全新的state对象,而不是直接修改原来的state。...Redux的数据流是单向的,从store开始,通过dispatch一个action来触发数据的更新,然后通过reducer来更新store中的数据。...此外,Redux还提供了中间件机制,可以在数据更新的过程中添加额外的逻辑。中间件可以用来处理异步操作、日志记录、错误处理等。...通过使用connect函数,我们可以方便地将Redux中的状态 (state) 和动作 (actions) 绑定到React组件的属性 (props) 上。...我们首先导入 connect 函数和动作 (actions),然后定义 mapStateToProps 和 mapDispatchToProps 函数。

    54240

    手把手教你全家桶之React(二)

    显然这不是我们要的效果,那么我们平时在项目里为什么会用到react-hot-loader就明了了,因为可以保存状态。...我们的公共组件都放在了src/components文件目录下,业务组件都放在src/pages目录下。在webpack中,提供一个别名配置,让我们无论在哪个位置下,都通过别名从对应位置去读取文件。...经排查,发现是node版本的问题,我用nvm来作node版本管理工具,从原本的4.7切换到9.0的版本,运行正确。 ? 我们试用了一下redux,对于在项目熟用的童鞋来说,简直是没难度吧。...connect()的作用有两个:一是从Redux的state中读取部分的数据,并通过props把这些数据返回渲染到组件中;二是传递dispatch(action)到props。...src/index.js中,我们传入store 注:我们引用react-redux中的Provider模块,它可以让所有的组件能访问到store,不用手动去传,也不用手动去监听。

    1.4K30

    手把手教你全家桶之React(二)

    显然这不是我们要的效果,那么我们平时在项目里为什么会用到react-hot-loader就明了了,因为可以保存状态。...我们的公共组件都放在了src/component文件目录下,业务组件都放在src/pages目录下。在webpack中,提供一个别名配置,让我们无论在哪个位置下,都通过别名从对应位置去读取文件。...经排查,发现是node版本的问题,我用nvm来作node版本管理工具,从原本的4.7切换到9.0的版本,运行正确。 ? 我们试用了一下redux,对于在项目熟用的童鞋来说,简直是没难度吧。...connect()的作用有两个:一是从Redux的state中读取部分的数据,并通过props把这些数据返回渲染到组件中;二是传递dispatch(action)到props。...src/index.js中,我们传入store 注:我们引用react-redux中的Provider模块,它可以让所有的组件能访问到store,不用手动去传,也不用手动去监听。

    1.7K80

    redux架构基础

    本文书接 从flux到redux , 是《深入浅出react和redux》为主的比较阅读笔记。 redux架构基础 “如果你愿意限制做事方式的灵活度,你几乎总会发现可以做得更好。”...Reducer不是一个Redux特定的术语,而是一个计算机科学中的通用概念,很多语言和框架都有对Reducer函数的支持。...一个应用中,最好只有一个地方需要直接导入Store,这个位置当然应该是在调用最顶层React组件的位置。...在我们的ControlPanel例子中,就是应用的入口文件src/index.js中,其余组件应该避免直接导入Store。 不让组件直接导入Store,那就只能让组件的上层组件把Store传递下来了。...的哲学,从框架原理层面了解了如何用redux来完成React应用,并提供优化方案——第一是把一个组件拆分为容器组件和傻瓜组件,第二是使用React的Context来提供一个所有组件都可以直接访问的Context

    1.2K10

    如何提高redux开发效率?当然是redux-tookit啦!

    # 前言 使用 react-redux 的朋友都经历过这种痛苦吧? 定义一个 store 仓库,首先创建各种文件,比如 reducer、action、store......,然后 将 redux 和 react 连接使用。整个流程繁琐,写起来代码冗余。 react-redux 创建仓库,文件目录如下: 好怀念使用 vuex 创建写仓库的日子..........# 什么是 redux-toolkit redux-toolkit 是官方推荐的编写 redux 逻辑的方法,简化了 redux 的配置过程,无需再创建 actions、reducer 的,更大程度方便使用...使用Provider包裹 React 顶层组件,将 Redux store 对象传递给组件树中的所有组件,使得 Redux 的状态管理能够在整个应用程序中生效。...或其他 slice 生成的 actions。

    26920

    如何在 React 应用中使用 Hooks、Redux 等管理状态

    redux 将带来管理状态所需的核心函数,而react-redux 将安装一些很酷的 hook,可以轻松地从我们的组件中读取和修改状态。 现在,首先是 store。...在 Redux 中,store 是拥有所有应用程序状态信息的实体。多亏 Redux,我们能够从任何想要的组件中访问 store(就像使用 context 一样)。...store 中,我们从 Redux toolkit 中导入 configureStore 函数,通过调用此函数来创建 store,并将一个带有 reducer 的对象传递给它,该对象本身就是一个包含 slice...我们从 Redux toolkit 中导入createSlice 函数,然后声明初始状态并初始化 slice。...Redux 是最成熟和使用最广泛的库,它附带大量文档、在线社区以及在每个新版本中发现和解决的以前错误。 它的坏处是,作为开发者,它给我们带来了一些我们必须学习和思考的新概念。

    8.5K20

    redux&react-redux

    redux是什么 1、redux是一个专门用于做状态管理的js库(不是react插件库)。 2、它可以用在react,angular,vue等项目中,但基本与react配合使用。...3、作用:集中式管理react应用中多个组件共享的状态。...UI组件合并到一个文件 引入connect 引入actions中的需要用到的回调 导出connect(映射状态---mapStateToprops(state),映射操作状态的方法--mapDispatchToProps...(dispatch))(UI组件) 4、contant文件 写入需要用到的常量分别导出 5、actions文件夹 引入常量 配置对象分别导出 6、reducers文件夹 引入常量...配置函数导出 书写流程规模化 这些是固定流程的处理(只用写一次) redux配置有些只用写一次的就直接提炼出来,每次直接拖入文件即可 react-redux:index文件引入Provider

    11110

    在 redux 应用中使用 GraphQL

    您需要编写自定义代码来调用服务器接口,解释数据,对其进行规范化并将其插入到存储中 - 同时跟踪各种错误和加载状态。 在本教程中,您将学习如何通过 Apollo Client 来获取和管理数据。...有一定的 React/Redux 经验——否则,请先阅读 react 教程和 redux 教程 ---- 在本教程中,我们将学习以下6个小节。...在这里我们把 redux store 通过 react-redux 中的 provider 传递给子组件。...将从 react-redux 中导出的 connect 方法替换成从 react-apollo 中导出的 connect 方法,同时将 mapQueriesToProps 作为参数传入。...渲染从 props 中传递下来的数据: import React from 'react' import { connect } from 'react-apollo' // NOTE: different

    1.9K10

    俺好像看懂了公司前端代码

    今天的主角React,它作为当今社会的前端主流框架,在前端框架江湖中算是一哥的存在,凭借小巧高效灵活等特点,完成了众多企业级的大项目,并且衍生了很多其他的框架,比如像跨平台移动开发React Native...然而这些都不是本篇文章的重点。...最后将生成的reducers交给redux管理,actions则为组件提供调用。actions函数里面有三步,包括请求前,请求中和请求后对状态的处理。...我们这里需要自己封装一个高阶组件,里面调用react-redux提供的connect函数将state和dispatch映射到组件的props,此外还需要定义两个函数映射到props中,一个是用于调用接口的函数...上文我着重说的是react如何管理调用接口,其实react native设计是一模一样的,大伙不妨试着设计一下。 许多事, 都是要经过不断尝试才会成功的。 这篇内容就到这里,我们下篇再见。

    1.3K10

    Redux使用总结

    内值唯一的方式 下载及安装 yarn add redux -D yarn add react-redux -D 1.在项目内增加redux管理项目状态 创建redux必备3文件(redux架构), store.js...使用combineReducers 合并小状态并导出 import { combineReducers } from 'redux' //创建测试临时状态,正式使用时删除 从actions.js 获取到.../store/store' //引入Provider中间容器,连接store和自己的组件 import { Provider } from 'react-redux' 的状态值 3.1 引入connect函数 import { connect } from 'react-redux' 3.2 书写filter函数具体内容,并真正注入数据 //...在组件内修改状态机内的状态 //发送action是唯一改变store状态的途径 5.1 在actions.js内,创建对应action对象,并导出 //改变test状态的值 export function

    77930
    领券