Questions tagged «react-redux»

我可能想念一些很明显的东西，想让自己清楚。 这是我的理解。 在幼稚的react组件中，我们有states＆props。更新state时会setState重新渲染整个组件。props大多是只读的，更新它们没有任何意义。 在订阅redux商店的react组件中，通过类似于store.subscribe(render)，它每次商店更新时都会重新渲染。 react-redux具有一个帮助程序，它通常通过类似以下方式connect()注入状态树的一部分（组件感兴趣）和actionCreatorsprops组件 const TodoListComponent = connect( mapStateToProps, mapDispatchToProps )(TodoList) 但是，了解到asetState对于TodoListComponent响应redux状态树更改（重新渲染）必不可少，因此在组件文件中找不到任何state或setState相关代码TodoList。它的内容如下： const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} /> )} </ul> ) 有人可以指出我所缺少的正确方向吗？ 附言：我遵循与redux软件包捆绑在一起的待办事项列表示例。

86 reactjs  redux  react-redux 

OP EDIT：如果其他人遇到此问题：该应用程序是使用create-react-app创建的，它将导入限制在src文件夹内。但是，如果将react-scripts升级到v1.0.11，则可以访问package.json。 我正在尝试从我的应用程序中的package.json获取版本号。 我已经尝试过这些建议，但是它们都没有起作用，因为我无法从src文件夹之外访问package.json（可能是由于React，我是新来的）。移动的package.json到SRC那么意味着我不能跑npm install，npm version minor和npm run build从我的根文件夹。我试过使用，process.env.npm_package_version但是导致未定义。 我正在使用Jenkins，但还没有设置它来推动提交，但是我唯一的想法是从GitLab中的标签获取版本，但是我不知道如何做到这一点，它会给仓库增加不必要的依赖性，所以我真的很想找到一个替代方案。 编辑：我的文件结构是这样的： --> RootAppFolder |--> build |--> node_modules |--> public |--> src |--> Components |--> Root.js | |--> package.json 因此，要从Root.js访问package.json，我将import packageJson from './../../package.json'得到以下错误： ./src/components/Root.js 找不到模块：您试图导入./../../package.json，它不在项目src /目录下。不支持src /以外的相对导入。您可以将其移动到src /中，也可以从项目的node_modules /中向其添加符号链接。

86 node.js  reactjs  npm  react-redux  create-react-app 

未处理的拒绝（错误）：动作必须是普通对象。使用自定义中间件执行异步操作。 我想在每个帖子中添加评论。因此，当获取帖子运行时，我想为所有帖子调用获取评论API。 export function bindComments(postId) { return API.fetchComments(postId).then(comments => { return { type: BIND_COMMENTS, comments, postId } }) }

84 reactjs  react-redux 

我只是做一个简单的应用程序来学习与redux异步。我已使所有工作正常进行，现在我只想在网页上显示实际状态。现在，我实际上如何在render方法中访问商店的状态？ 这是我的代码（所有内容都在一页中，因为我只是在学习）： const initialState = { fetching: false, fetched: false, items: [], error: null } const reducer = (state=initialState, action) => { switch (action.type) { case "REQUEST_PENDING": { return {...state, fetching: true}; } case "REQUEST_FULFILLED": { return { ...state, fetching: false, fetched: true, items: action.payload } } case "REQUEST_REJECTED": { …

83 javascript  asynchronous  reactjs  redux  react-redux 

我有一个在React Native Navigator组件中创建的react-redux容器组件。我希望能够将导航器作为道具传递给此容器组件，以便在其演示组件中按下按钮之后，它可以将一个对象推入导航器堆栈。 我想这样做而无需手写react-redux容器组件给我的所有样板代码（并且也不要错过react-redux也会给我的所有优化）。 容器组件代码示例： const mapStateToProps = (state) => { return { prop1: state.prop1, prop2: state.prop2 } } const mapDispatchToProps = (dispatch) => { return { onSearchPressed: (e) => { dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator } } } const SearchViewContainer = connect( …

82 reactjs  react-native  redux  react-redux 

我正在使用reactjs路由器中的Link组件，但无法使onClickevent运行。这是代码： <Link to={this.props.myroute} onClick='hello()'>Here</Link> 这是做这件事的方式还是另一种方式？

82 reactjs  react-router  react-redux 

我正在尝试启动刚从GitHub存储库克隆的Redux应用程序。 我尝试使用以下命令运行它 npm start 我收到此错误 > react-redux@1.0.0 start /home/workspace/assignment > webpack-dev-server --config ./configs/webpack/webpack.config.development.js sh: 1: webpack-dev-server: not found npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! react-redux@1.0.0 start: `webpack-dev-server --config ./configs/webpack/webpack.config.development.js` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed …

81 javascript  reactjs  npm  redux  react-redux 

我已经使用create-react-appcli创建了一个新的react应用程序。然后我使用添加了'react-redux'库npm install --save react-redux。 在package.json我有： "react-redux": "^4.4.5" 不幸的是，该应用程序无法编译，并且抱怨： Error in ./~/react-redux/lib/utils/wrapActionCreators.js Module not found: 'redux' in C:\Users\Salman\Desktop\Courses\Internship\React\Youtube-Front-End\node_modules\react-redux\lib\utils @ ./~/react-redux/lib/utils/wrapActionCreators.js 6:13-29 我不知道这是什么意思？ 这是完整的容器： import React,{Component} from 'react'; import {connect} from 'react-redux'; class BookList extends Component{ renderList(){ return this.props.books.map((book)=>{ <li key={book.title} >{book.title}</li> }); } render(){ return( <div> <ul> {this.renderList()} </ul> </div> ); …

80 reactjs  react-redux 

我有这个反应 export function fetchPosts() { const request = axios.get(`${WORDPRESS_URL}`); return { type: FETCH_POSTS, payload: request } } 在这种情况下，如何测试axios？开玩笑说，在那个网站上有一个异步代码的用例，他们使用了一个模拟函数，但是我不知道我是否可以用axios做到这一点？参考：https : //facebook.github.io/jest/docs/tutorial-async.html 到目前为止，我已经测试了它是否返回了正确的类型 it('should dispatch actions with the correct type', () => { store.dispatch(fetchPosts()); let action = store.getActions(); expect(action[0].type).toBe(FETCH_POSTS); }); 我不知道如何传递模拟数据并测试它是否返回，但是有人有任何想法吗？ 先感谢您

78 javascript  reactjs  react-redux  jestjs 

我有一个带有搜索面板的网页。搜索面板有几个输入字段：id，size，... 我想要的是用户设置搜索值（例如：id = 123和size = 45）并按下搜索按钮时： Redux reducer中的searchState应该使用新的搜索值（id = 123和size = 45）进行更新 网址应更改为“ http：// mydomain / home？id = 123＆size = 45 ” 另一方面，如果用户将URL更改为http：// mydomain / home？id = 111＆size = 22，则： reducer中的searchState应该使用新的搜索值（id = 111和size = 22）进行更改 UI搜索面板输入应更新为新值（id = 111和size = 22） 如何达成目标？我应该使用什么路由器（react-router，redux-router，react-router-redux或其他）？

77 react-router  redux  react-redux  redux-framework  react-router-redux 

我有以下组件会no-shadow在上触发ESlint错误FilterButton props。 import { setFilter } from '../actions/filter'; function FilterButton({ setFilter }) { return ( <button onClick={setFilter}>Click</button> ); } export default connect(null, { setFilter })(FilterButton); 如何在保持简洁语法mapDispatchToProps和ESlint规则的同时避免警告？ 我知道我可以添加注释以禁止显示警告，但是对每个组件执行此操作似乎都是多余且乏味的。

76 javascript  reactjs  redux  eslint  react-redux 

我正在创建一个简单的表单，以使用带有redux表单和材料ui的电子反应样板上传文件。 问题是我不知道如何创建输入文件字段，因为材料ui不支持上传文件输入。 关于如何实现这一目标的任何想法？

73 reactjs  electron  react-redux  redux-form  formsy-material-ui 

我正在使用React + Flux。我们的团队计划从助焊剂转变为还原剂。Redux对来自助焊剂世界的我非常困惑。在磁通控制中，从组件->操作->存储和存储更新返回组件很简单。它很简单，也很清楚。 但是在redux中令人困惑。这里没有商店，是的，有些例子没有使用商店。我经历了一些教程，看来每个人都有自己的实现风格。有些正在使用容器，有些则没有。（我不知道这个Containers概念，也无法理解mapStateToProps，mapDispatchToProps的作用）。 有人可以清楚地说明redux中的控制流是如何发生的吗？ redux中的组件/容器/动作/动作创建者/商店的作用是什么？ redux / react-redux / redux-thunk /其他之间的区别?? 如果您可以发布任何简单而精确的redux教程的链接，这将非常有帮助。

73 javascript  reactjs  redux  reactjs-flux  react-redux 

我刚刚将功能齐全的本机应用程序升级到Redux v4，但是现在出现以下错误： 错误：错误：错误：错误：减速器执行时，您可能无法调用store.getState（）。减速器已经收到状态作为参数。从顶部减速器向下传递，而不是从商店中读取。 我怀疑问题是我内部有许多组件，每个组件都有自己的组件connect(mapStateToProps, mapDispatchToProps)(Component)，我认为这不是实现它的正确方法，尽管我不确定这样做的正确方法。 任何方向都将不胜感激！ 堆栈跟踪： This error is located at: in Connect(SideBarApp) (at SceneView.js:9) in SceneView (at createTabNavigator.js:10) in RCTView (at View.js:43) in RCTView (at View.js:43) in ResourceSavingScene (at createBottomTabNavigator.js:86) in RCTView (at View.js:43) in RCTView (at View.js:43) in TabNavigationView (at createTabNavigator.js:127) in NavigationView (at createNavigator.js:59) in Navigator …

71 redux  react-redux 

我已经在redux createStore方法中设置了InitialState，并将对应的InitialState作为第二个参数 我在浏览器中遇到错误： <code>Uncaught Error: Reducer "postsBySubreddit" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined.</code> 代码在这里： import { createStore, applyMiddleware } from 'redux' import thunkMiddleware from 'redux-thunk' import createLogger from 'redux-logger' …

69 javascript  redux  react-redux