Questions tagged [redux]

Redux is a predictable state container for JavaScript applications based on the Flux design pattern.

0
votes
1answer
13 views

How to do something inside component after triggering a redux action?

i want to domething inside component after an action is done. for example i want to show a modal to user after a request is successfully done, or disable some elements if request is done successfully. ...
0
votes
1answer
16 views

My dispatch for changing the state in redux is not called?

I am trying to display flash message to the user on the login component after reseting the password. I 've commented axios calls because it's unimportant for this case. I am calling dispatch twice, ...
0
votes
1answer
27 views

How to test the redux form in jest

I am using a stateless component which has reduxform in it.I am trying to write unit test for the login form to get the input details as well as to simulate the form on click. but i don't know where ...
0
votes
0answers
31 views

Unhandled Rejection (TypeError): Cannot read property 'token' of undefined

I am getting a TypeError for the property of "token" after submitting a form for an account registration (JWT authentication). I am using React-Redux as well. Also, is there any other way rather ...
0
votes
1answer
27 views

React redux connect rendering optimisation

I am trying to get how to manage complex state in React, with limiting the number of render calls for components whose content has not changed. As example: I have simple connected to redux store ...
0
votes
1answer
13 views

How can I use jest and enzyme to test content generated dynamically?

So, this component "Info" is a container which process some data in order to generate a "Details" children component with some props. Info.JS import React from 'react' import Details from './...
3
votes
0answers
21 views

React-redux hooks with TypeScript

I am using react-redux hook useSelector with TypeScript. Is there any support for static typing? Now I have to cast using as keyword. interface User { age: number } const selectUser = (state): User =...
0
votes
4answers
23 views

React-Redux: onClick function is not working says “this.props.selectDog is not a function”

I'm new to Redux, and I'm making a simple Redux app. By default there's a list of dogs and if I click one of the button I can see the detail about the selected dog. Right now if I click the button it ...
1
vote
1answer
24 views

How to test Redux async action with redux-axios-middleware

My Redux store is configured with redux-thunk and redux-axios-middleware for fetching data with axios HTTP clients. I have an action that works perfectly in development but I'm failing to test it ...
1
vote
0answers
14 views

Material UI popover fails to open on anchor

I am trying to have a popover appear over an icon when hovering. I tried to adapt the code from here https://material-ui.com/components/popover/#mouse-over-interaction. My solution is below. I tried ...
0
votes
2answers
23 views

How can I make sure a React parent component loads data before its child component mounts?

I'm writing a simple calendar application that uses a common layout to wrap different views of events (month view shows a larger calendar with all the days of the month and events for each day, week ...
0
votes
1answer
49 views

How to update nested object of array of objects in Javascript?

const testArr = [ { id: 'aaa', children: [ { id: 'aaa-1', children: [ { id: 'aaa-1-1' } ] }, { id: 'aaa-2'} ...
0
votes
1answer
19 views

How do execute callback when state has been updated in redux?

Is it possible in redux to execute similar function to update state as it is in react? I mean to pass callback function as a parameter to action creator, which will execute after state update and ...
0
votes
0answers
15 views

How to easily remove fields from Redux form and Redux store

My code uses conditional rendering to remove fields from form DOM. For redux form, the deleted field value will remain in the form store, and this is really annoying. Anyone has good ideas how to ...
0
votes
0answers
30 views

How should I update Redux Form Select Field Options

In my project, I need to update Select Field Options based on some conditions, but this will cause a problem. For example, the previous options are [{ text: "a", value: "a" }, { text: "b", value: "b"...
0
votes
0answers
22 views

Browsers needs a HTTP response, but server is not allowing multiple responses

This is my handler that sends out a PUT request to my server: export function insertRandomQuestionsHandler(roomId, questions) { return (dispatch) => { dispatch(...
0
votes
1answer
38 views

How to re-render a component when it changes its props async?

I am using React and Redux in a project I’ve two components a parent and a child. The parent component passes some props to the child when the child component receives those props it calls some ...
1
vote
0answers
18 views

Having unused 'mergedProps' parameter on 'connect' throws error on component rendering

I'm using Redux for my current Typescript React project and have a bit of a hard time to get into it. Connecting components works fine so far for me though. interface OwnProps { ownProp?: boolean;...
4
votes
2answers
53 views

Is it ok to pass the entire Redux state object into a React component?

We have a component which needs access to Redux's store. import React from 'react' import { connect } from 'react-redux' const Component = (props) => { ... code ... } We've connected this ...
0
votes
1answer
8 views

multiple Redux-form with formValueSelector

I'm trying to create multiple forms that have dependable dropdowns. Based on selection on dropdown1, some fields are shown and another dropdown is populated. To achieve the multiple forms, I have to ...
0
votes
0answers
23 views

Incredibly bad performances using Higher-Order Component, Redux and FlatList

My problem https://imgur.com/fHHqSqF Notice than when the list appears, I directly click on the first item, but it takes 5 seconds to render... I have the same problem when I delete an item from the ...
0
votes
1answer
21 views

Extending connected stateful connected component

I would like to create a base Redux component with its own state and properties. When I extend it in a generic way, I want to merge the extended object's properties and state also with the base. This ...
0
votes
1answer
26 views

React360-Redux:Communication between 2 roots components via redux

I have 2 root components in react360.I have the main panel with information and my products and i have my 3d model.I want to communicate one another.Μore specifically I just want to click on the ...
0
votes
1answer
33 views

Retrieve collection + subcollection give me an empty render

The problem At web app startup, the main task is to retrieve all user informations that are stored in various Firestore's collections and sub-collections. The problem is that, even if I uses ...
0
votes
1answer
15 views

Any good way to simplify component wrapped by multiple functions?

App component has been wrapped by so many functions. Is there any way to make this look better? withstyle(styles)(withRouter(withApollo(connect(App))));
0
votes
2answers
26 views

passing parameter onClick, React

i have this slice of code: const ChangeRequest = ({ inRelease, title, requestId, cost, supervisor, chipText, description, showModal, }) => ( <div onClick={() => ...
0
votes
1answer
63 views

Testing a Redux login Action with fetch api

On my React-Native project, i tried to start unit testing, how to test on Redux action that involves a login fetch api call.I've looked at some examples of testing an async Action, but I haven't ...
1
vote
1answer
30 views

Redux async actions and view updates

I'm trying to implement a login form for a website, it's my first project on React so I'm quite a beginner. To do so, I use socket.io-client inside my redux reducer. The thing is, it doesn't update ...
0
votes
1answer
14 views

How to store only a part of the redux state using redux-persist

How can I store only a part of the redux-state using redux-persist. For example I have the following state const initialState = { data: [], fetched: false, loadingUser: false } How can I store only ...
1
vote
1answer
34 views

Redux state not updating even though reducer is called

I having a restaurant type application that I'm building. I'm using redux for handling the state. I have an icon in the top corner that keeps track of the number of items in the cart. This worked and ...
0
votes
0answers
30 views

How to use `handleActions` to handle different payload type?

I use handleActions from redux-actions as below code: export const productReducer = handleActions<Product, ProductActionProps>( { [ProductActionType.SEARCH_STAMP]: (state, { payload }) =&...
0
votes
1answer
60 views

add object to array based on id in redux

i have location data like an example(ex: [{country:"US", area:"virginia"},{country:"AUSTRALIA",area:"sydney"},{country:"INDIA",area:"bangalore"}] . i want to add each location to one array by clicking ...
0
votes
1answer
23 views

how to append nested values to redux array state

I am posting a comment to an image, I want to be able to fetch the new comment state without having to refresh the page to see the new comment. Ideally if this was something simple like this: ...
1
vote
3answers
29 views

react type error when fetching new array state

I'm trying to convert this code // this.setState({ // description:'', // resets title after upload // images: [ // { // id: newImage[0].id, // user:{ // ...
0
votes
0answers
9 views

Redux-Observable: mapDispatchToProps() in Connect(Login) must return a plain object. Instead received undefined

I'm building a small app based on my previous work. Setup of the actions, epics, and reducers are exactly as in the previous app (where everything worked just fine). But now I'm getting this error: ...
0
votes
0answers
58 views

Can't get selected value from dropdown

I have a form that contains an input and a dropdown that's filled with elements from an API. But I'm having a probem, whenever I submit the form It only passes the value from the input and not the ...
0
votes
1answer
34 views

Using react router inside redux

If we wanted to change route programatically inside redux, we used to use react-router-redux npm package. However it was archived by its author. Now the recommended solution is connected-react-router: ...
0
votes
0answers
43 views
+100

Recording redux navigation state in model state?

I've structured my redux application such that my data models are handled on separate branches of the state tree. {concerts, venues} I've also used react-navigation-redux-helpers to put my ...
0
votes
0answers
10 views

which version of react-redux and redux to use with create-react-native-web-app?

I used [email protected], it was compatible with reactJs but not react-native, then i tried [email protected] which was compatible with react-native but not reactJs, so what version of redux and react-...
0
votes
0answers
19 views

useMemo, as an alternate approach of componentWillMount

Previously for loading data, I was using componentWillMount on server side, and componentDidMount on client side. In order to replace component classes I wanted to use useEffect hooks for loading ...
0
votes
0answers
12 views

Redux State updated but not reflecting in the component props. But the component props get updates after calling the same event twice

I'm refactoring my app's authentication part to redux concepts. So I'm facing this issue when clicking the sign up / sign in / forgot events. Whenever I'm clicking the action (signup / sign in / ...
0
votes
0answers
21 views

Redux-saga mocking apis for development purpose

I'm using "redux-saga": "^1.0.2" I wanted to mock my APIs using redux-saga and didn't find proper answers online. I finally ended up with a very basic but easy solution: using Promise. Could you ...
-1
votes
0answers
23 views

What's the difference between `newArray = myArray` and `newArray = […myArray]`? [duplicate]

In some of Freecodecamp redux challenges, I came across one which teach state immutability. And I should "return a new array with the item from an action property action.todoappended to the end". ...
0
votes
3answers
19 views

“Attempted import error: 'authReducer' is not exported from './authReducer'. ”

**actually, I'm trying to import a function from JS file called authReducer.js but I'm unable to do so. In authReducer.js I tried to store that function in const variable in the name of authReducer ...
0
votes
0answers
29 views

Why is my React app crashing (due to Redux) when launched on Chrome Incognito?

I've been experiencing an issue working with React/Redux. Specifically, when I open my app on (Google) Chrome, it works just fine under the browser's normal mode. However, doing so in Incognito ...
0
votes
2answers
25 views

Having trouble passing Redux state to child component

I'm new to Redux, and I've been working with the code for the very first example project in the Redux docs. That example doesn't use containers or have separate files for actions, so I figured I'd ...
0
votes
2answers
25 views

A pattern to manage intial async actions with redux sagas for fetching initial data?

Until now I've been using redux-thunk for async actions. On application startup I use to have to load some data from some server. So what I do is to create async actions and then use async/await in ...
0
votes
2answers
29 views

How can I make a React component construct …?

without actually using it in a render method? I have a React component that only holds logic but still uses dispatch() from redux. It is called F1_Start // import F1_Start from './F1_Start' How ...
0
votes
0answers
56 views

Run a check function before functions in an object

I have a fetcher object and before any of the functions of the object run I want to run a token check. I was wondering if there was a way to run the check initially and then proceed to the get, post, ...
0
votes
2answers
16 views

My react-dates DateRangePicker is not working/rendering when clicked

I'm building a react redux expense tracking app and use moment.js and react-dates to set time and filter time range. However I am getting the error when I select anywhere, or the "x" to clear date, ...