我是使用React和Redux的新手,正在构建一个简单的todos应用程序。我正在命令行中使用create-react-app工具编写应用程序。
问题
我去了其他博客和帖子,其他人提到我缺少一个npm插件来转换装饰器“ transform-decorators-
legacy”,将其与Babel一起添加到我的依赖项中,但仍然收到相同的错误。
Syntax error: Unexpected token (9:0)
7 | import './App.css';
8 |
> 9 | @connect((store) => {
| ^
10 | return {
11 | user: store.user.user
12 | }
我的密码
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Todos from './components/Todos';
import Todo from './components/Todo';
import './App.css';
@connect((store) => {
return {
user: store.user.user
}
})
class App extends Component {
constructor(){
super()
this.state = {
name: 'Brad',
todos: [
{
id: '001',
name: 'Take out trash',
completed: false
},
{
id: '002',
name: 'Meeting with boss',
completed: false
},
{
id: '003',
name: 'Go out to dinner',
completed: false
}
]
}
}
render() {
return (
<div className="App">
<h1>Hello</h1>
<Todos name={this.state.name} todos={this.state.todos}/>
<Todo/>
</div>
);
}
}
export default App;
我的依赖
package.json
{
"name": "react-redux-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^4.3.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"react-scripts": "1.0.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
任何帮助/知识将不胜感激,谢谢!
尝试这样:
const stateMap = (state) => {
console.log('state', state);
return {
//something from state
};
};
export default connect(stateMap)(App);
本文向大家介绍react-redux中connect()方法详细解析,包括了react-redux中connect()方法详细解析的使用技巧和注意事项,需要的朋友参考一下 组件 React-Redux将所有组件分为两大类:展示组件(UI组件),容器组件 展示组件有以下几个特征: 只负责 UI 的呈现,不带有任何业务逻辑 没有状态(即不使用this.state这个变量) 所有数据都由参数(this.
无法使用语法来代替 它看起来像这样: 但是当我使用@Connect装饰器使事物更干净时,我没有得到任何在我的状态中列出的东西。 突然之间,它不知何故实际上并不连接事物: 我做错了什么,我看到每个人都在使用的神奇的@Connect装饰器的正确使用方法是什么? 其余的代码,以防万一,以@connect的形式;
我有一个组件类,我正在使用react-redux将redux存储连接到该组件类,但是当我尝试将该组件传递到connect函数时,出现了一个错误。 以下是我正在使用的每个接口(redux发出的调度除外): IFileItemProps:组件将使用的所有类型 IFilePassedProps:这些是从父组件传递到组件的道具,所以我没有看到呈现的组件元素的键入问题。 IFileItemReduxStat
我正在使用Redux尝试我的第一个react-native应用程序,并在设备上运行应用程序时得到以下错误消息, “UnableToResolveError:无法从C:\project\testing\index.android.js解析模块react-redux/native:模块映射或以下目录中不存在模块:C:\project\testing\node_modules\react-redux”
问题内容: 我开始使用React JS开发一个Web应用程序。我从主题森林购买了一个主题。在主题中,他们在组件中使用像这样的撰写。 如您所见,导出组件时,他们的代码最后使用了compose。我无法修改其构建结构。我现在想做的是我也喜欢使用react的connect功能。 通常connect用于代替撰写。现在,如果我想使用connect来处理应用程序的状态,如何将其与compose一起使用? 问题答
目录 为何组件没有被重新渲染、或者 mapStateToProps 没有运行? 为何组件频繁的重新渲染? 怎样使 mapStateToProps 执行更快? 为何不在被连接的组件中使用 this.props.dispatch ? 应该只连接到顶层组件吗,或者可以在组件树中连接到不同组件吗? React Redux 为何组件没有被重新渲染、或者 mapStateToProps 没有运行? 目前来看,