redux

问题 Here is what my reducer looks like: export default function catalogReducer(state = initialState.catalogItems, action){ switch (action.type) { case types.LOAD_CATALOG_SUCCESS: return { count:action.count, products :[...state['products'], action.catalogItems ? [...action.catalogItems['products']] : [] ] default: return state; } } What I want to do: This is a reducer for loading catalog items Items are coming from a paginated api. I need to add results from api to existing list of products

问题 I have a very basic ReactJS app which uses Redux which contains the following components: PanelMaterialSize > Select /src/controls/PanelMaterialSize/PanelMaterialSize.js import React, { Component } from 'react'; import { connect } from 'react-redux'; import './PanelMaterialSize.scss'; import Select from '../Select/Select'; import { setThemeList } from '../../store/AppConfig/actions'; class PanelMaterialSize extends Component { componentDidMount() { this.n = 1; setInterval(() => { let

问题 When I hit submit button I need to redirect to this page pageOne, so I googled and found a react router and used this line this.props.history.push("/anotherPage"); , but its not redirecting. Its throwing an error Invariant failed: You should not use <Route> outside a <Router> Can you tell me how to fix it. Providing my code snippet and sandbox below. https://codesandbox.io/s/material-demo-n9o7s <!-- language-all: lang-or-tag-here --> anotherPage = () => { console.log("redictToStepper --->");

问题 I have a electron application which uses React & Redux, so I have action creators, reducers etc. I also have a function in my renderer file (nodejs) which does some async stuff. I want to call this function from within my action creator. I guess I will have to use redux-thunk for this or some other async library, however, I am not quite sure how to access this function in the renderer process and use it in my react.redux app? So e.g. for the action creator: export const downloadFromYoutube =

问题 I have a product made with React.js (sth like CRM) which I would like to distribute to many of my customers but with client-specific components (override the common ones). Source folder structure of main codebase looks like this: ... /src ├── components │ ├── Sidebar │ ├── Navbar │ ├── Buttons │ ├── Chart │ └── __tests__ ├── containers │ ├── About │ ├── App │ ├── Chat │ ├── ... ├── helpers ├── redux │ ... ├── theme | ... └── vendor ... /custom-src ├── clientA │ ├── components │ ├── containers

问题 I have a react/redux app where I have some filtering and searching. Because of how the API's are set up, I have to do a little ground work in between receiving the filters and then sending the new search query. So I have a small reference map of the active filters that updates each time I check or uncheck a filter. The problem is, I would like the action to run that updates the filter, and then the action to call the server with the new filter parameters after that, and I am unsure how this

问题 Suppose i have Component A that contains an input field. A second Component B contains a submit button. The two components aren't linked directly (e.g they are 2 leaf in a 2-depth tree) On Submit i need to retrieve input value, how to resolve this in a react + redux environment? The most obvious solution that came to my mind was to bind React Component's refs to redux state, in this way the state has the reference to the input value (accessed through state.fieldName.input.value). In the

问题 Here is my data flow: 1: 500+ objects come trough socket in 1-2s bursts 2: Objects are added directly to redux store 3: React table container is connected to redux store (using it as data source) and re-renders for every object. That many re-renders pretty much kill browser. What options do I have to buffer incoming objects(events) and send batches to reducer every, say 1s? Even better solution would be to somehow time-limit react rendering (shouldComponentUpdate...), but I doubt it's

问题 I'm trying to setup testing on a new project created with react-create-app. Which now seems to be using React 16 and Jest 3 (which supposedly had some breaking changes, or maybe that was enzime). I'm getting an error similar to this post TypeError: dispatch is not a function when I try to test a method using JEST TypeError: dispatch is not a function at App.componentDidMount (src/components/App.js:21:68) import React from 'react'; import { Provider } from 'react-redux'; import { mount } from

问题 I'm writing some generic Todo-List component, with the following features Pagination / Sorting Keep a part of the state within the URL (page, sort) Fetching the Data asynchronously using HTTP Requests (using redux-saga) Now I'm trying to find a pattern for the "best" sequence of redux actions to get this working without problems. I want the following behavior: When Todo Component loads: Read URL Query Parameters and use this to fetch the data. When the user clicks sort by name (or next page