草庐IT

example-redux-update-nested-props

全部标签

javascript - Redux-thunk 派发一个 Action 并等待重新渲染

importReactfrom"react";import{render}from"react-dom";import{createStore,applyMiddleware}from"redux";import{Provider,connect}from"react-redux";importthunkfrom"redux-thunk";constdisabled=(state=true,action)=>{returnaction.type==="TOGGLE"?!state:state;};classButtonextendsReact.Component{componentDi

javascript - 在 Nest.js 中,如何在装饰器中获取服务实例?

在CustomDecorator中,如何访问Nestjs中定义的服务实例?exportconstCustomDecorator=():MethodDecorator=>{return(target:Object,propertyKey:string|symbol,descriptor:PropertyDescriptor)=>{//Here,ispossibiletoaccessaNest.jsservice(i.e.TestService)instance?returndescriptor;}}; 最佳答案 聚会迟到了,但由于我遇

javascript - React-redux connect() 的 mapStateToProps 在 react-router 导航中被多次调用

我有一个简单的路由器(从redux-router开始,切换到react-router以消除变量)。Admin组件基本上只是带有一些导航的{this.props.children};它不是connected组件。Pages组件是一个使用mapStateToProps()进行连接的组件,如下所示:functionmapStateToProps(state){return{pages:state.entities.pages};}帖子更有趣:functionmapStateToProps(state){letposts=map(state.entities.posts,post=>{retu

javascript - react + 终极版 : Component does not update

尝试使用React+Redux,并且可能正在做一些明显愚蠢的事情,因为触发操作以通过网络获取数据的组件在获取数据时不会得到更新(重新呈现)。这是我的代码的相关部分:作为应用程序入口点的顶级index.js:importReactfrom'react';importReactDOMfrom'react-dom';import{Provider}from'react-redux';import{createStore,applyMiddleware}from'redux';import{Router,browserHistory}from'react-router';importredux

javascript - 使用 React 和 Redux 对来自 API 的特定于日期的结果进行分页

我想使用Redux在我的React应用程序中显示一些新闻。问题是我想显示各个日期的新闻,并且我想对新闻进行分页。在我的API中我打印{pagination:{count:1000,size:10,page:1,pages:100},news:[..]}我知道如何制作简单的分页,但我不知道如果我希望能够在我的应用中显示不同日期的新闻,API应该如何工作。直到现在(没有日期),我只是在我的Reduxreducer中保留了状态news和pagination,然后检查页码是否等于总页数页面以确定是否应尝试加载更多新闻。但现在我可能有很多不同的日期,而且我想将所有新闻保存在Redux存储中,我不

javascript - 传递 React Redux 意外键以创建商店

我收到错误Unexpectedkey"characters"foundininitialStateargumentpassedtocreateStore。预计会找到一个已知的reducer键:“marvelReducer”、“routing”。意外键将被忽略。根reducer:import{combineReducers}from'redux';import{routerReducer}from'react-router-redux';importmarvelReducerfrom'./marvelReducer';constrootReducer=combineReducers({m

javascript - 将 Flow 用于样式化组件 Props

所以我一直在研究JavaScript中的类型系统,大部分情况下一切正常,但是样式组件存在问题。我似乎找不到将流程应用于样式化组件的Prop的好方法。到目前为止,我看到的唯一解决方案是:exporttypeButtonPropTypes=ReactPropTypes&{styleType:'safe'|'info'|'warning'|'danger'|'link',isPill:boolean,isThin:boolean,};exportconstButtonStyled=styled.button`${generateBaseStyles}${hoverStyles}${fillS

javascript - 如何组合具有依赖状态的 redux reducer

我正在开发一个React/Redux应用程序,它允许将“小部件”添加到页面并在2D空间中进行操作。要求可以一次选择和操作多个小部件。我当前状态树的简化版本如下所示...{widgets:{widget_1:{x:100,y:200},widget_2:{x:300,y:400},widget_3:{x:500,y:600}},selection:{widgets:["widget_1","widget_3"]}}我目前有这棵树由2个reducer管理,一个管理widgets状态,另一个管理selection状态。选择状态缩减器可以简化为(注意:我也在使用Immutable.js)...

javascript - 正确解构整个组件的 this.props

我今天遇到一个问题,考虑以下组件:exportdefaultclassInputextendsReact.Component{someFunction(){console.log(this.props.value)}render(){const{type,value,required}=this.propsreturn()}}我成功地解构了this.props并且可以在渲染中使用它们,但是如果我需要在它之外使用prop值怎么办,即在someFunction()我我不确定如果我移出constant{...}并在exportdefaultclassInputextendsReact.Com

javascript - 如何将全局状态数据处理到 Redux 中的深层嵌套组件中?

假设您有一个具有此组件结构的聊天应用程序:.........Redux状态如下:{currentUser:...,chatsList:...,selectedChatIndex:...,messagesList:[...]}您将如何使当前用户信息对可用?组件(将为每条消息呈现当前用户缩略图)而不必从根组件一直传递到所有中间组件?以同样的方式,您如何在不暴露整个状态对象的情况下使组件树中的每个表示/dumb组件都可以使用当前语言、主题等信息? 最佳答案 (更新:在选项4上花了一些时间,我个人认为这是可行的方法。我发布了一个库,reac