得到警告:在将reducer(每个都有自己的immutable.js Map)与#redux combinereducer组合时,“还不完全支持将映射用作子对象”。有什么更好的商店结构可以避免这种情况
import reducer_2 from './action_handlers/two';
import reducer_3 from './action_handlers/three';
import { combineReducers } from 'redux';
let reducer
我刚刚开始在Redux中使用Normalizer,我被一个简单的问题困住了,但我可能做错了。所以我想规范化一个数组,如下所示:
{
articles: [
{id: 1, someValue: 'test'},
{id: 2, someValue: 'test2'}
]
}
{
result: {
articles: [1,2]
},
entities: {
articles: {
1: {someValue: 'test'},
标签: Redux
react-reduxredux-form
我试图将从redux表单接收到的数据放入我的状态。当用户提交表单时,会创建一个对象,但我无法将此数据推送到用户数组中。这是我的密码:
class UserControlPage extends Component {
constructor(props) {
super(props);
this.state = { users: []};
this.handleSubmit = this.handleSubmit.bind(this);
}
handle
这可能也是一个一般性的问题,但具体来说,在redux表单方面,为什么道具既脏又原始。只有一个是不可能的,因为正如我所理解的,redux表单中没有“dirty”选项,名称是“pristine”,您将其设置为true或false,这意味着表单是dirty有一个,请参阅文档,正是我困惑的原因我很有信心,那脏兮兮的=!在任何情况下都是原始的,参见
我需要帮助设计一个简单的应用程序,它允许用户使用表单对视频进行评分。我的状态由2个还原器组成,一个保存所有可分级视频的数据(以规范化方式),另一个保存表单状态:
{
videos: {
'video1Id': { id: 'video1Id', title: 'Cat video', duration: 120, ... },
'video2Id': { ... },
...
},
rateForm: {
'videoId': 'video1Id'
我不熟悉rxjs和redux观测值
我有两部史诗:
export const appInit = action$ =>
action$.ofType(actions.appInitRequest)
.take(1)
.switchMap(() => actions.fetchData())
及
App Init触发操作以获取数据,
是否可以在获取数据完成之前保持导航epic?因此,如果收到导航操作并且获取数据未完成,我们将等待获取数据完成(dispatch action
我想将存储在redux中的令牌传递给ApolloBoost客户端。如何使用redux react钩子库实现此功能
import ApolloBoost from 'apollo-boost'
const client = new ApolloBoost({
uri: 'https://api.github.com/graphql',
request: (operation) =>{
operation.setContext({
headers:{
我在学习Redux时遇到了createStore函数。据我所知,createStore接收3个参数:
reducer
initial state
enhancers (for simplicity we will use only middlewares)
但是,当我们在操作中使用createStore时,我们不会将初始状态作为第二个参数传递,而是传递具有默认状态的reducer,如下所示:
const initialState = {counter:0}
const reducer =(st
我试图在一个具有复合键的实体中使用Redux工具包。例如,“我的领地”实体有一个类型(市、州、生物群落等)和一个地理编码。对{type,geocode}是该实体的复合密钥
我希望能够使用selectById和其他选择器。我的第一个想法是创建一个连接类型“;”和地理编码的id字段,但我相信有更好的方法
import { createEntityAdapter } from '@reduxjs/toolkit'
const adapter = createEntityAdapter({
/
我的产品组件通过映射的道具和分派连接到状态。从Products.js调用fetchProducts()应该发送'FETCH_Products'操作(和console.log('fired from product actions')并将数据作为有效负载发送到product reducer),这反过来又将从'data.json'提取的数据(Products)添加到state(也应该是console.log('fired from Products reducer'),反过来,支持通过props.P
标签: Redux
react-reduxredux-thunk
我有以下行动:
export const connectToServer = (url, config, method) => {
return (dispatch) => {
dispatch({type: CONNECTION_START});
axios({
method: method,
url: url,
data: config
})
.then((response) => {
标签: Redux
async-awaittry-catchdispatch
假设我正在使用redux异步操作进行一个非常通用的api调用。有一个“INIT”调度和“SUCCESS”或“FAILURE”,与结果有关
将“INIT”分派放入try catch块中有什么区别吗?
选项A(在try catch块之外):
我想说这只是一个微妙的不重要的细节,但是几乎每次我写一个新的异步动作时,我都会花一分钟来考虑它……:/我通常避免认为事情不会抛出
如果它抛出怎么办?什么代码将处理它?您可能有一个外部try-catch块,但现在在doSomething过程中发生的事情正在其他地方
这些方法中的一种在编程上比另一种有什么优势吗
actions.js
与:
reducers.js
还是说这些几乎等同,只是偏好的问题?我能看到的使用thunks的唯一优势是,如果用户保存了数据,与只单击关闭按钮相比,可以执行额外的处理。它至少为以后保留了该选项。第一个示例中的三个动作创建者都是等效的。您根本没有发送用户\u关闭的\u对话框或用户\u保存的\u数据。这就是您想要的吗?只需假设在其他地方(在React容器中),dispatch(userClosedDialog())或dispatch
我想同时使用redux表单的提交和同步验证。同时只使用其中一个有效,但当我同时使用两者时,同步验证似乎覆盖了提交验证的结果
export default class MyForm extends Component{
render() {
...
return (
...<form>
<Button onClick={handleSubmit(submit)}>Submit
我想知道如何使用redux reducer处理特定用例。举个例子,假设我有一个带有DataGrid/表的表单。在编辑按钮上单击一行,我想打开带有选定行数据的弹出窗口。编辑数据后,在弹出的“提交”按钮上单击,我想更新表/数据网格(即,数据网格现在应该具有编辑的值)
我已经编写了两个独立的组件
1.MainPage.js及其对应的reducer MainPageReducer(员工列表)
2.PoupPage.js及其对应的减速机PoupPageEducer(所选员工)
这两个减速机如何共享状态?您
如何阻止在ngrx中注销操作后触发的所有已调度操作?是否有某种根调度器来处理此逻辑?我的回答基于此,希望我正确理解了您的需求
几天前,我有一个类似的要求:根据应用程序状态,防止任何操作从运行效果中分派。
另外,我需要一些东西在很多效果中使用这个逻辑,所以它必须简单易用
我的解决方案是在运行请求完成后过滤效果链。因此,一旦用户注销,任何响应都会被忽略
首先,我创建了一个helper类,它封装了这个“忽略”逻辑:
效果助手.ts
从'@angular/core'导入{Injectable};
从'
我使用的是rxjsv5.4.3,redux observablev0.16.0
在我的申请中,我希望实现以下目标:
用户具有身份验证令牌和刷新令牌以重新生成身份验证令牌
用户使用身份验证令牌进行请求。(通过发出请求操作)
如果失败,请使用刷新令牌请求重新生成身份验证令牌。
如果刷新,则发出令牌\u刷新操作以更新身份验证令牌,并且不发出请求\u失败
如果刷新失败,则发出请求\u失败
刷新(并更新身份验证令牌还原程序)后,请使用刷新的身份验证令牌重试请求。
如果请求成功,则发出请求成功,如果
我有一个所有者对象属性,它是许多父级对象的公用属性。这就是我保持一致性的方法。下面是一个简化的示例:
Cat对象:
{
"id": 1,
"name": "Johnny",
"owner": {
"id": 123,
"name": "Sam",
"phone": "307-555-1234"
},
"gender": "male"
}
汽车物体:
{
"id": "lkj33k3j9992jj21",
"ma
我的工作基于以下方向:
所以我在让这个测试执行史诗时遇到了一个问题,我遗漏了什么吗?在任何情况下,代码都会解释发生了什么
我希望调用tostore.dispatch({type:'GO'})来链接我所有的史诗。我看到我的减速机已经连接好了,但是Epics没有被调用
仅供参考,我需要这个来测试我认为是错误的东西。在我的实际应用程序中,当我使用epicLoader$动态加载一个新的epic时。next()动态加载的epic现在被调用两次。。。但在这个测试成功之前,我无法证明这一点
作为一种解决方法,
我需要使用reducer更新应用程序的存储。但是我想让它动态化,这样我就不需要为更新同一级别的存储编写不同的操作
让我们说下面我的商店看起来像这样
const store = { nonPersistedState : {first :"", second : "", third : ""} }
所有的第一、第二和第三个都在同一个非持久状态级别上
如果我想更新以上三个函数,下面是我的action和reducer函数
//action
dispatch({type: "UPDATE_MODEL
标签: Redux
react-reduxreducers
我的reducer中有这段代码(它的行为是在创建过程中发现的)
它工作正常,但我感到困惑。map()函数应该返回一个新数组,然后我必须用一个新数组更新状态,但在这种情况下,它似乎会直接将新数组返回给对象,而状态更新是“错误的”
请帮助我了解它是如何工作的是,映射返回一个新数组。但问题是,您正在变异此数组中的对象,无法使用el.goal=updatedGoal.goal修改el
当您使用map函数时,几乎总是应该从中返回一些内容,而不是直接修改基础项
请严格按照以下步骤执行此操作:
案例“更新目标
我用的是盖茨比和雷多克斯。我正在尝试使用JWT和Redux实现身份验证
在我的Redux开发工具中,我看到isAuthenticated设置为true。但是,我仍然可以访问我的登录页面,它不会自动将我导航到配置文件页面。事实上,下面的代码似乎根本没有运行!有人遇到这种情况并有解决方案吗?谢谢
if (isAuthenticated) {
navigate(`/app/profile`)
}
登录页面的完整代码
const Login = ({ login, isAuthenti
我是react/redux的初学者
我已经在我的应用程序中完成了一个基本组件,它的操作/reducer/store很好地工作
我将用不同的设置(道具)渲染另一个
我要做的是分离这两个组件,因为当我在其中一个组件中执行更新操作时,另一个组件同时执行更新操作
问题1
我试着把商店里的州分开
import heatMap from './heat-map1'
import {combineReducers} from 'redux';
export let reducers = combineRed
标签: Redux
react-reduxredux-devtools
我正在按照Redux教程创建Todo应用程序,并尝试在我的提供商旁边的React Router下应用和嵌入它,但我遇到了以下错误:
Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Provider`, expected a single ReactElement.
in Provider (created by Root)
in Root
以下是我尝试嵌入它的方式:
标签: Redux
react-reduxredux-observable
是否有计划通过离线特性增强redux的可观察性?如果此时有任何行为,如/offer:请求失败时恢复存储更改,这将是一件好事
最好的方法是什么?我很想将redux observable与这些LIB中的任何一个结合起来,并在需要的地方使用它。另一方面,我喜欢使用observable:)redux observable的目标只是让您能够将RxJS与redux一起使用。有人可以在上面构建其他东西,比如离线、事务等,但它不在redux observable本身的范围之内
我们还希望确保您确实可以同时使用其
所以我对React-Redux的connect有点困惑,因为它似乎没有将任何内容传递回我的组件。我整个上午都在试着调试这个,我看了一些教程,但我看不出我做错了什么。下面是一段相关代码。我是不是误解了
consttodolist=(道具)=>{
console.log(props);//仅返回具有一个属性的对象
//包含函数的分派。在哪里
//我的TODO、过滤器、切换TODO和删除TODO是否正确?
返回(
占位符
)
}
const renderTogdogenerated=connect(
标签: Redux
react-reduximmutability
我有一个可以容纳一个公司的物体,在一个公司内部,有一系列的团队
company: {
teams: [
{
name: 'test team',
description: 'dddd',
team_manager: null,
company: '592577d5b591966c8e535865',
permalink: 'test-team',
createdAt: '201
将Flowtype与Redux一起使用,我得到了如下类型:
export type MapState = {
addresses: Address[],
selected: Array<number>
}
在reducer中,我将参数合并到以下状态:
export default (state: MapState = initialState, action: SetParamsAction) => {
switch (action.type) {
cas
标签: Redux
react-reduximmutability
我试图重置数据,并想进入初始状态,我知道不变性在这一部分起着主要作用
下面是我的店铺数据(流程完成数据)
我想用以下数据替换它
animalSense: {
selectedVision: 'dayLight',
selectedState: 'california',
viewedVisions: ['dayLightcalifornia', 'dayLightsouthAfrica', 'nightVisioncalifornia'],
viewedAni
我对redux的本地反应还不熟悉。我试图弄清楚本地redux集成中的所有部分是如何反应的。给我带来麻烦的一件事是理解不同的类型,选择器会给我提供更多的细节。MapStateToProps->他的名字说,你可以将状态对象映射到道具。例如:
你有一个这样的商店:
{
name:'paul',
surname:'watson'
}
const mapStateToProps = (state, ownProps) => ({
myname: state.name,
})
cons
我正在用简单的年龄递增和递减学习redux,下面是代码示例
const{createStore}=require(`redux`);
const initialState={age:21};
const reducerOne=(state=initialState,action)=>{
const newState={…state};
if(action.type==`ADD`){
newState.age=action.value;
}
if(action.type==`SUBTRACT`){
我的传奇故事有以下设置:
在saga.js中
import { put, call } from "redux-saga/effects";
import { takeLatest } from "redux-saga";
import { SET_BASE_CURRENCY, SET_CURRENCY_REPONSE } from "./duck";
function* fetchCurrencyExchangeRate() {
const response = yield call(
目前,我正在使用@redux/toolkit的v1.4.0版本,并且在测试一个reducer时使用了一个通过createAsync thunk创建的拒绝操作,该操作带有一个自定义的rejectedWithValue。可以使用自定义错误负载创建action对象,如
asyncThunkAction.rejected(null, '', undefined, {
message: 'error',
errorCode: 500,
});
使用v1.5.0,您将无法再
标签: Redux
react-reduxredux-form
我有一个带有输入字段和同步验证的表单。同步验证将生成一条错误消息,错误消息将显示在输入字段下方
但是,在某些情况下,我只希望输入字段有一个红色边框,没有错误消息。我尝试使用字段级验证
import {validateDateString} from "some/path";
const renderField = ({input, value, meta: {touched, asyncValidating, error, valid}}) => {
我是测试新手,所以我甚至不确定这是否是我“应该”测试的东西,但下面是:
我将按照中的示例介绍如何为异步操作创建者编写测试。以下是我正在测试的代码:
export function receiveRepresentatives(json) {
return {
type: RECEIVE_REPRESENTATIVES,
representatives: json.objects
}
}
export function getRepresentatives (zipcod
当我直接使用redux reducer时,我得到了预期的状态:
import cheese from 'reducers/cheese.js';
const store = createStore( cheese );
<Provider store={ store } >
...
</Provider>
但是当我使用combineReducer时,我得到一个嵌套状态
import cheese from 'reducers/cheese.js';
impor
标签: Redux
fetchreact-reduxredux-saga
它告诉我“承诺不是一种功能”。我的问题是,对于同构获取,您必须放置两次才能得到解析结果。我应该怎么做才能用redux saga生成器正确地管理它
import { put, call, takeEvery, takeLatest } from 'redux-saga/effects'
import fetch from 'isomorphic-fetch'
import errorMessages from './../conf/errorMessages'
function *fetchBa
标签: Redux
react-reduxredux-thunk
我正在使用Redux进行一些异步操作。在ReduxGithub文档中,他们建议的方法之一是定义以下三个操作
{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }
参考:
在我的项目中,在收到错误后,我将显示一条消息几秒钟,然后通过将错误重置为null而消失。我在上述方法中发现的问题是,他们使
标签: Redux
nestedreducersredux-actions
也许我错过了一些非常明显的东西,但今天我却被它绊倒了
假设我们有一个Redux存储,其结构如下:
const state = {
...
pages: {
...
accountPage: {
currentTab: 'dashboard',
fetching: false,
tableSettings: {
sortDir: 'asc',
sortField: 'name'
}
}
我相信这是一个非常普遍的情况。。。我正在构建一个由一些数据源驱动的组件组成的仪表板。在视图顶部是一系列过滤器,例如日期范围。更新日期范围时,屏幕上的组件需要根据所选范围更新其数据。这将反过来迫使从属于该选择器的各个组件需要基于新选择的范围获取新数据async action/XHR
屏幕上可能有许多组件,用户可能希望添加/删除可用的显示,因此它不像总是刷新所有组件的数据那样简单,因为它们可能存在,也可能不存在
我认为处理这个问题的一种方法是在选择新的日期范围时调度操作,即找出屏幕上从存储派生的组件
标签: Redux
requestaxiosredux-sagahttp-error
我正在使用库redux saga requests进行网络通信和高级状态管理。根据的指导,我已经设置了一个全局错误处理程序,以便在服务器请求超时或用户出现连接问题时显示通知
但是,当我收到服务器错误(例如500)时,我无法访问操作中的响应。服务器响应根本不存在
有没有一种方法可以访问此对象,同时仍保持在redux saga的限制和规则范围内
这是初始的存储设置-注意,onErrorSaga没有给我网络响应,所以我最好使用默认行为-发送一个后缀\u ERROR操作,该操作可以被我的reducer捕
我遇到了一个奇怪的问题。使用最新的nextjs@9.5.1
下面是有问题的代码:
import Header from './header';
import Head from './head';
import Footer from './footer';
import { useEffect } from 'react';
import Utils from '../util/utils';
import { hostName } from '../config/variables';
f
标签: Redux
redux-sagaredux-toolkit
我已经用@reduxjs/toolkit和redux saga设置了CRA
主要的传奇故事确实流传了下来。然而,打算在takeEvery或fork上运行的子传奇似乎根本不运行
传奇故事:
export function* saga() {
console.log('main'); //logs
fork(function* () {
console.log('fork') //doesn't log
});
}
const sagaMiddleware = createS
我有一个关于减速器的一般性问题。在我的应用程序中,我有许多用户(孩子、家长和老师)。我已经创建了一个reducer,用于从数据库中为家长/教师加载任务,在初始状态下,我有一个数组“tasks”
我必须创建另一个reducer来从数据库加载子任务吗?我必须,我可以使用相同的数组名“tasks”吗
TasksReducer.js:
const initialState={
任务:[],
图像:空
}
常量任务=(状态=初始状态,操作)=>{
开关(动作类型){
案例“从服务器加载任务”:
返回{
…
我是redux新手,研究了redux操作或在reducer中使用switch语句,虽然我不反对使用switch语句,但我想知道,仅仅使用调用action方法不是更容易吗
我是这么想的
import actions from './actions'
const reducer = (state = {}, action) => {
if (actions[action.type]) return Object.assign({},
state, actions[acti
我试图在应用程序上实现ngrx,但在连接各州时遇到了这个问题。我有一个root reducer,它提供在app.module.ts中存储为StoreModule.forRoot(reducers)
减根剂:
import * as fromAuth from 'app/auth/auth.reducer'
import { authReducer } from 'app/auth/auth.reducer';
export interface State {
auth: fromAuth.
标签: Redux
react-reduxredux-saga
我需要在不同的时间点开始几个传奇故事的解决方案。我已经创建了3个不同的传奇,并尝试将它们像数组一样实现到sagaMiddleWare.run()。但现在我得到一个错误-runSaga(storeInterface,saga,…args):saga参数必须是一个生成器函数
我知道为什么会发生这种错误,但不知道如何解决它
谢谢大家!
sagaMiddleWare.run([watchSearchForCash, watchBootlegging, watchGraffiti])
通过将所有传奇合并
已解决
我们在发帖两分钟后发现了一个问题。。。
我们的解决方案是:
let state:any;
store.subscribe(() => {
state = store.getState();
});
我正在用Redux和Redux persist构建一个React应用程序。我在访问React组件外部的Redux状态时遇到问题。如果我订阅存储和控制台日志状态,它将显示正确的状态,其中包含数据,但当我在控制台日志外部记录状态时(const state=store.getStat
我有一个不变的记录如下:
export const Pane = new Record({
'id': null,
'editors': new List(),
});
其中,编辑器是与窗格关联的id字符串列表
在我的Redux reducer代码中,我有:
const pane = new Pane({
id: action.payload.id,
editors: new List(action.payload.editorId),
});
我使用的是react循环,我尝试使用它的CombineReducer,但将其扩展为作为第三个参数传递全局状态,基本上实现了一个类似于
Combine Reducer基本上调用ChildReducer,我们可以在其代码中找到这一点
let currentChild = childReducer(prev[key], action, ...args);
其思想是将第三个参数so、action、plainState、…args传递到那里,以便减速器将其作为参数接收。问题是如何生成该plainStat
1 2 3 4 5 6 ...
下一页 最后一页 共 22 页