redux_编程技术问答社区_程序员问答知识库

以下是关于 redux 的编程技术问答

如何将Phaser集成到React中

我已经创建了一个使用Create-React-App创建的React应用程序，并且我也尝试集成Phaser 3.我跟随本指南开始.我已经有帆布渲染文本，但是预紧力中的加载图像似乎无法正常工作.我得到默认的未能显示纹理图像. import ExampleScene from "./scenes/ExampleScene"; import * as React from "react"; export default class Game extends React.Component { componentDidMount() { const config = { type: Phaser.AUTO, parent: "phaser-example", width: 800, height: 600, scene: [ExampleScene] }; new Phaser.Game(conf

6 2023-05-25 编程技术问答社区 reactjs redux create-react-app phaser-framework

React Native应用程序中Redux Store的最大尺寸是多少?

我正在写一个React Native应用程序.我正在使用Redux存储数据.我在任何地方都使用这些数据，因此我将其存储在Redux中，并且不从服务器请求它.通过3-5个还原器和40-60个动作的组合修改了此数据. 在我的情况下，数据可以约为1-2 mb. 这会影响我的应用程序性能吗? 解决方案不知道更多细节:可能不知道.即使渲染一个按钮也可能占用更多的CPU时间，您必须存储大量数据，然后才能开始填充任何相关数量的RAM，甚至达到单个图像的大小.

0 2023-05-24 编程技术问答社区 react-native performance redux mobile-application redux-store

``提供者''和`connect in readux for react''之间的区别

我看到，使用Redux，有两种方法可以将状态传递到React应用程序中的组件，一个是将提供商组件扔给提供商组件，而另一个则具有连接功能.但是，我想知道为什么有两种不同的方式，哪种方式比另一种更好. 解决方案它们不是互斥的.实际上，即使使用connect>(请参阅: https://github.com/reactjs/react-react-readux/blob/master/master/docs/api.md#provider-store ) 没有connect您必须手动将商店传递到需要它们的组件，而嵌套组件会变得凌乱，因为您需要将其传递多个级别，即使是通过商店的孩子，也不需要商店的组件需要商店. 其他解决方案提供商(组件):将应用程序附加到存储. 连接(函数):创建容器组件.

2 2023-05-24 编程技术问答社区 performance reactjs redux react-redux

大对象的Redux性能

我正在使用Redux并进行反应来构建Web应用程序.我的应用程序是一个分析应用程序，可提供大量数据.当我的商店变得大时，我正在遇到性能问题. REDUX中大数据避免性能问题的首选方法是什么? 应用程序结构我的应用程序以settings(小JSON)，results(大JSON)和calculate(settings)的方式结构.计算是确定性的，并且愿意.我的应用程序渲染设置元数据以及图表，表等中的结果由于计算是确定性的和掌握的，所以我知道当设置不变时，结果不会改变.当设置确实改变时，我的结果可能会改变.换句话说，我很舒服地仅依靠设置来确定我是否需要更新我的UI. REDUX行为和潜在解决方案当我在商店内包含结果时，我的应用程序很慢: let settings = { foo: "bar" }; let results = calculate(settings); Object.assign({}, state, { settings: se

0 2023-05-24 编程技术问答社区 javascript json performance reactjs redux

使用componentShouldUpdate进行React+Redux性能优化

我有一个react/redux应用程序，它已经变得足够大，需要一些性能优化. 大约有〜100个唯一组件通过WebSocket事件进行更新.当发生许多事件(例如5/秒)时，浏览器开始显着减慢. 大多数状态以不可变化的对象保存在redux商店中.整个商店被转换为普通的JS对象，并通过组件树作为道具传递. 问题是当一个字段更新，整个树更新时，我相信这是最有改进的空间. 我的问题: 如果整个商店都通过所有组件传递，是否有一种智能方法来防止组件更新，或者我需要每个组件的自定义shouldComponentUpdate方法，基于哪个支架(及其子女)实际使用? 解决方案您真的不想那样做.首先，据我了解，不变的toJS()相当昂贵.如果您每次都在整个州进行此操作，那将无济于事. 第二，立即调用toJS()几乎是使用不成熟的js类型的整个好处.您确实希望将数据保留在不可变的包裹表单上，直到您的渲染功能为止，以便您从shouldComponentUpdate中获

0 2023-05-23 编程技术问答社区 javascript performance reactjs redux

React Native/Redux应用中可能存在的导航问题

在使用Redux的Big React Antive应用程序中导航期间，所有访问的场景(导航堆栈的场景)都保持安装.所有这些场景都会收到道具，并按照从上一个场景组件派遣任何动作的顺序呈现.它会导致冻结和分发和最后一个场景渲染之间的可见延迟. 对于导航，我正在使用 react-native-nordative-router-flux 问题也发生在原始React Native Navigator. 视频 React Native/Redux App中的可能导航问题代码 react-redux-navigation-test 很高兴知道如何防止通过道具从导航链中不集中组件. 目前，我正在检查每个组件的shoreComponentUpdate，如果该组件的重点(可见)并在相反的情况下返回false. 有更好的解决方案吗? 解决方案我建议您使用场景中的导航索引和标头渲染方法计算当前场景和场景之间的场景距离.如果距离> 1返回null. 这应防止呈现整

0 2023-05-23 编程技术问答社区 performance navigation react-native redux react-redux

如何使React Native移动应用更快？

React Native Mobile 应用程序在每次点击上的工作非常缓慢. 我正在使用React Native v0.40.0，以下是我项目的依赖性. { "analytics-react-native": "^1.1.0", "apisauce": "^0.7.0", "babel-preset-es2015": "^6.18.0", "es6-promise": "^4.0.5", "flow-bin": "^0.36.0", "geolib": "^2.0.22", "immutable": "^3.8.1", "intl": "^1.2.5", "isomorphic-fetch": "^2.2.1", "lodash": "^4.17.4", "lodash.range": "^3.2.0", "prop-types": "^15.5.10", "raven-js":

0 2023-05-23 编程技术问答社区 android performance react-native redux stack-trace

一个React-Redux应用真的能像Backbone那样扩展吗？即使有reselect。在移动领域

在redux中，所有连接组件上对存储的每一个更改触发notify.这使开发人员变得非常简单，但是如果您使用n个连接组件的应用程序，并且N非常大? ? 即使与组件无关的每个更改，也可以在商店的reselect ED路径上进行简单===测试.那很快，对吗?当然，也许一次.但是n次，对于，每个更改吗?这种设计的基本变化使我质疑Redux的真实可扩展性. 作为进一步的优化，可以使用_.debounce批量所有调用.即便如此，对每个商店进行n ===的测试更改和处理其他逻辑，例如查看逻辑，似乎是达到目的的手段. 我正在研究拥有数百万用户的健康与健身社交移动WEB混合应用程序，并从骨干向Redux 过渡.在此应用程序中，向用户提供了可滑动的接口，该接口允许他们在不同的视图堆栈之间导航，类似于Snapchat，除了每个堆栈都有无限的深度.在最受欢迎的视图中，无尽的滚动器有效地处理了饲料项目的负载，渲染，附加和脱离，例如帖子.对于订婚的用户，滚动浏览数百或数千个帖子，然后输入用户的提

0 2023-05-23 编程技术问答社区 performance backbone.js mobile reactjs redux

为什么React/redux的状态会在刷新时重置？

当我登录时，一切正常，但是当我击中刷新或导航的那一刻，状态就会重置.知道为什么吗?我希望能够从状态引用用户并获取诸如姓名等的信息，并在组件中使用它.但是它只有在我登录后立即起作用，然后将重置. 另外，为什么我必须使用.如果没有，我会得到地图对象.是因为不变了.JS? 这是我的app.js文件 /** * app.js * * This is the entry file for the application, only setup and boilerplate * code. */ // Needed for redux-saga es6 generator support import '@babel/polyfill'; // Import all the third party stuff import React from 'react'; import ReactDOM from 'react-dom'; import { Provider

8 2023-05-22 编程技术问答社区 javascript reactjs redux react-redux immutable.js

叶状组件中的connect()是react+redux中反模式的标志吗？

当前从事React + Redux项目. 我还使用 normalizr 来处理数据结构，重新选择以收集应用程序组件的正确数据. 似乎一切正常. 我发现自己处于类似叶子的组件需要商店数据的情况，因此我需要connect()组件来实现它. 作为一个简化的示例，想象一下该应用程序是一个书籍编辑系统，有多个用户收集反馈. Book Chapters Chapter Comments Comments Comments 在应用程序的不同级别上，用户可以为内容和/或提供注释. 认为我正在渲染一章，它具有内容(和作者)和评论(每个都有自己的内容和作者). 目前我将connect()和reselect基于ID的章节内容. 由于数据库已通过joraryizr进行了归一化，因此我实际上仅获取本章的基本内容字段以及作者的用户ID. 为了呈现评论，我将使用一个可以重新选择链接到本章的

2 2023-05-22 编程技术问答社区 javascript redux immutable.js react-redux normalizr

传播操作者与不可变的.js

在将Redux与React一起使用时，Immutable.js几乎已成为行业标准. 我的问题是，当我们使用传播操作员时，我们不是在不成熟的Redux状态吗?例如， const reducer = (state=initialState, action) => { switch(action.type){ case actionType.SOME_ACTION: return { ...state, someState: state.someState.filter(etc=>etc) } } 我不是用redux不可变的状态设置状态吗?使用不变的js而不是传播操作员制造物体不变的方式有什么好处? 很抱歉，如果有人问这个问题，但是我找不到满足我的答案.我了解不变对象的好处，但不理解使用不变的库而不是点运算符的重要性. 解决方案

16 2023-05-22 编程技术问答社区 javascript reactjs redux immutable.js

如何从redux reducer返回不可变的数据？

对于学习和测试项目，我试图从还原器返回不可变的redux数据，因为组件的安全数据.这是我的还原代码: function itemsReducer(state = [], action) { switch(action.type) { case 'ITEMS': return [...action.data] default: return state } } 这是我的循环代码: { this.props.items.map((item) => ( {item.name.first} {item.name.last} )) } 现在每个事情都正确地工作了，但是使用此方法更改道具后: change() { this.props.items[0] = 'e

12 2023-05-22 编程技术问答社区 javascript reactjs redux react-redux immutability

Redux-form：如何在模态弹出时从API调用中加载值（编辑模式）到表单？

我很陌生，反应和redux形式，目前我需要一些帮助. 基本上，我有带有列表及其编辑按钮的列表页面.单击编辑时，我将显示一个带有字段的模态弹出，并进行API调用以获取相应的列表数据. 您能否让我知道如何通过从API调用中收到的数据进行模态弹出的字段? 与代码样本的演示将不胜感激(就像我说的是React&Redux&Redux-Form的新手). :( 预先感谢！解决方案这是流程: componentDidMount() { this.props.loadClient(); // dispatch an action from your component } 动作调度程序 loadClient() { // API call here } 将结果存储在redux还原中 case LOAD_PROFILE_SUCCESS: return { ...state, data: action.result

0 2023-05-22 编程技术问答社区 javascript html reactjs redux redux-form

错误： StateProvider(...)：没有从render中返回任何东西。这通常意味着缺少一个返回语句。或者，要渲染什么都没有，返回null

我有一个错误，如错误:stateProvider(...):渲染中没有任何返回.这通常意味着返回语句丢失.或者，为了渲染，请返回null .这是由于本节的. 我正在研究我的项目，并使用 react 和 redux . import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { StateProvider } from './StateProvider'; import { reducer, initialState } from './reducer'; ReactDOM.render(

2 2023-05-22 编程技术问答社区 javascript html reactjs redux react-hooks

JavaScript React Redux：不刷新就无法删除网页上的项目

我有下面的当前网页，并在卡片顶部单击"红色X'"按钮时要删除用户. 当前，在我单击" X'删除按钮之后，什么也不会发生.刷新页面后，将从我的网页中删除用户.但是我希望这种情况完全不需要刷新. 示例网页渲染: 后端路线: 为了实现这一目标，我尝试了以下内容: 设置后端路线: const router = require('express').Router() const {User} = require('../db/models') module.exports = router const {isUser, isAdmin} = require('../checks') // 8080/api/users/:userId router.delete('/:userId', isAdmin, async (req, res, next) => { let userId = req.param

10 2023-05-16 编程技术问答社区 javascript html reactjs redux store

点击时改变状态 React+Redux

如何使用OnClick事件更改CurrentPage状态的价值?单击按钮，我想更改价值，并使用页面数量. 组件: import React from 'react'; import { connect } from 'react-redux'; import { setCurrentPage } from '../actions/pages'; const PageItem = ({ pageNumber }) => ( this.setCurrentPage(e) } id = { pageNumber }> { pageNumber } ); const mapStateToProps = (state) => { return { pages: state.pages.currentPag

0 2023-05-16 编程技术问答社区 reactjs events redux pagination onclick

如何用react redux在帖子中插入数据？

我正在学习React-Redux，因此我正在为使用JSON占位符API的用户创建一个CRUD应用程序，现在我能够显示数据，删除和编辑，但是我在添加数据时遇到了问题. 这是沙盒中的实时演示: redux live demo 现在，当我单击添加用户按钮时，我会收到以下错误. Cannot read property 'editing' of undefined. 这是我添加用户的形式组件. import React, { useState } from 'react' import {useDispatch} from 'react-redux' import {addUser, addNewUser } from './redux/acitons/users/Users'; function AddUserForm({ user }) { const dispatch = useDispatch(); const [name, setName

12 2023-05-16 编程技术问答社区 javascript html reactjs redux

如何在Reactjs应用程序中使用分页功能

我正在使用我无法修复此pagination ui及其每页的内容每页相应地绑定我的数据我试图从bootstrap导入less，但不是为此渲染. 关于解决这个分页问题的任何建议? 更新代码:它现在正在工作 //blog.js import React, {Component} from 'react'; import {Card, Grid, Cell, Dialog, CardMenu, Button, CardTitle, CardText, CardActions, FABButton, Icon} from'react-mdl'; import { Container} from 'reactstrap'; import { connect } from 'react-redux'; import { getBlog, deleteBlog } from '../../actions/resumeActions'; import PropTy

6 2023-05-16 编程技术问答社区 javascript reactjs redux pagination blogs

带有路由器位置、分页/排序和获取的React Redux

我正在编写一些通用的待办事项组件，并具有以下功能分页/排序将状态的一部分保留在URL(页面，排序) 使用HTTP请求(使用Redux-saga) 以异步获取数据现在，我正在尝试找到一种"最佳" redux动作序列的模式，以使此操作无问题. 我想要以下行为: 何时加载todo component:读取URL查询参数并使用它来获取数据. 当用户单击sort by name(或next page或filer by xyz)时，应更新URL中的查询参数，并应获取下一个数据. 我当前的代码的作用: 我正在创建props todos，pagination和sort react-redux的mapStateToProps: state => { todos: state.venues.page, pagination: parsePagination(state.router.location.search), sor

0 2023-05-16 编程技术问答社区 reactjs redux pagination redux-saga query-string

ReactJS组件的textarea在状态改变时没有更新

我正在尝试编写一个笔记/组织应用程序，并且遇到了一个令人沮丧的错误. 这是我的组件: import React from 'react'; const Note = (props) => { let textarea, noteForm; if (props.note) { return ( { props.handleUpdateClick(props.selectedFolderId, props.selectedNoteId, textarea.value); }}> Update {textarea = node;

6 2023-05-16 编程技术问答社区 html reactjs redux textarea

首页
<
1
2
3
4
5
6
7
8
>
尾页