Questions tagged [redux]

Redux is an innovative approach and framework built to effectively handle the state of JavaScript applications. By utilizing dynamic events known as "actions", it offers a centralized storage solution for state management throughout your entire application. With defined regulations in place, Redux ensures that state updates occur in a reliable and predictable manner. This tool greatly simplifies your understanding of when, where, why, and how the state within your application evolves, as well as the consequent behavior of your application logic following these modifications.

Connect this - initiate the removal of an item

I am seeking assistance from more experienced colleagues to help me understand the code below and implement it in my App. The main objective is to trigger a REDUX action from a button, which will delete an item from a database. Here is the code that curr ...

javascriptreactjsreduxmaterial-ui

Learn how to implement React Redux using React Hooks and correctly use the useDispatch function while ensuring type-checking

I'm curious about the implementation of Redux with Typescript in a React App. I have set up type-checking on Reducer and I'm using useTypedSelector from react-redux. The only issue I have is with loose type-checking inside the case statements of the Reduc ...

reactjstypescriptreduxreact-redux

"Can you provide guidance on updating the state when props are being set through the use of mapStateToProps

I implemented a text field that uses props from Redux's mapStateToProps to set its defaultValue. Whenever there is a change in the text field (detected through onChange={...}), I use setState to store user input. However, I encountered an issue where if ...

reactjsreduxmaterial-ui

The use of dispatch in React Redux is not functioning as expected

I am facing an issue with a React component that throws an error when trying to dispatch a Redux action. Below is the code for the component: import React from 'react'; import { connect } from 'react-redux'; import { createBook } from './actions/books'; ...

reactjsreduxreact-redux

Render a component in certain routes based on specific conditions in React

This is my Index.js ReactDOM.render( <React.StrictMode> <Provider store={store}> <Router> <App className="app-main" /> </Router> </Provider> </R ...

javascriptreactjsredux

Using Redux to retrieve external key values in order to associate them with card components

After implementing include functionality for foreign keys in my backend API controller, the values are now being fetched into my Redux store, where I intend to use them. However, I am facing challenges in accessing these values when attempting to map them ...

reactjsreduxreact-reduxmaterial-ui

Transferring information from HTML to React and Redux

Currently, the backend server is generating an HTML page that includes a javascript object named MY_DATA and the root element for the React/Redux app: <script> MY_DATA = { foo: 'bar' } </script> <div id="app"></div> I am faci ...

reactjsreduxreact-redux

Attempting to implement usedispatch hook in combination with userefs, however, encountering issues with functionality

I've been exploring the Redux useDispatch hook lately. I created a simple app for taking notes in a todo list format. However, I am facing an issue with useDispatch as it's not working for me and I keep encountering this error: Module build failed (from ./ ...

javascriptreactjsreduxreact-reduxreact-state-management

The error message "TypeError: undefined is not an object when evaluating 'iter[Symbol.iterator]'" appeared in the context of a React Native application

I have successfully integrated react-redux and redux-persist into my react-native project. However, I encountered an error when trying to add an object to the Redux state: [TypeError: undefined is not an object (evaluating 'iter[Symbol.iter ...

reactjsreduxreact-reduxreact-native

What are the steps for implementing persisting and rehydrating data in redux-toolkit?

After setting up the redux-persist with react-toolkit as recommended in the documentation, I found myself needing to perform some operation on rehydrate. Unfortunately, my attempts have been unsuccessful so far. Here is what I have tried: ... import { RE ...

typescriptreduxredux-toolkitredux-persist

Troubleshooting issue with React mapping an array of items in a modal window

My state implementation is working perfectly fine, except for a minor issue with the modal window. Within the state, I have utilized objects that are normally displayed (you can refer to the screenshot here). Please pay attention to the "Open modal" butt ...

javascriptarraysreactjsreduxmodal-window

Tips for organizing JSON information in ReactJS

Could someone lend a hand with sorting JSON data in ReactJs? I'm having trouble getting it to work properly. Also, if I want to sort by title, would it be the same process? Thanks! This is what I've tried so far: componentDidMount() { fetch('htt ...

javascriptjsonreactjssortingredux

Unable to access the store from the Redux library within a React application

I decided to test out the Redux example from the official React-Redux website, which can be found HERE, using the following JavaScript code: // index.js import React from 'react' import ReactDOM from 'react-dom' import TodoApp from './TodoApp' import { P ...

javascriptnode.jsreactjsnpmredux

Is there a way to efficiently fetch localStorage data upon launching a React application and seamlessly store it in Redux using the useEffect hook without experiencing any data loss issues?

Should I avoid mixing React hooks and mapStateToProps in my application and instead use Redux hooks like useSelector? In my React app, I have an array of 'friend' data stored in Redux. Using useEffect in one of my components, I am saving this da ...

javascriptreactjsreduxreact-reduxreact-hooks

Is there a tool in Node.js to set up a new project, similar to the scaffolding feature in Visual Studio for C# projects

Is there a way to efficiently create a node.js project with TypeScript and Express, and embed an SPA client using React and Redux templates written in TypeScript as well? Is there a scaffolding tool available to streamline this process, similar to the ea ...

node.jsreactjstypescriptexpressredux

Encountering an anomaly in persistent redux while using NEXT.JS

I recently made some updates to my ecommerce store, including adding login and register options. To ensure that user tokens are saved even after a page refresh, I decided to implement redux-persist. However, I encountered an issue where the design breaks a ...

reactjsreduxreact-reduxnext.js

When modifying the variable with an index in React JS, all objects with the same key but different indexes are also altered

I attempted to modify the array of objects, specifically creating a task list that includes user name, task description, and other details. However, when I update the task at the first index, all the objects with different array indexes also get modified. ...

javascriptreactjsreduxreact-redux

The concept of Theme.breakpoints does not exist in MUI React, there is

I keep running into the same error where theme.breakpoints is undefined when I try to use theme.breakpoints.up in my code. The versions of the dependencies I am currently using are: "@emotion/react": "^11.9.0", "@emotion/styled&quo ...

javascriptcssreactjsreduxmaterial-ui

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

javascripthtmlreactjsreduxmaterial-ui

When integrating react-router 5 and redux 7, there is an issue where the state is not being reset when navigating to a new route using react-router's <Link

My current setup includes the following versions: `"react-router": "^5.2.0",` `"react-router-domreact-router": "^5.2.0",` I'm unsure if my setup is compatible with React-router 5 as I was using a version prior ...

javascriptreactjsreduxreact-routerreact-router-dom

The mapStateToProps function in a Higher Order Component is receiving an OwnProps argument with a property that is not defined

I'm a new user of react-redux trying to connect a higher-order component to the react-redux store. In the mapStateToProps function, I'm using the ownProps argument to filter the state. However, the property I'm trying to use within OwnProps ...

reactjstypescriptreduxreact-redux

Every time I attempt to access a product from the HomeScreen, I encounter the following issue: "Converting circular structure to JSON"

Whenever I try to click on a product from the HomeScreen.js, it is supposed to take me to the ProductScreen in order to display the detailed information of the product. However, I encountered the following error message: Converting circular structure to J ...

node.jsreactjsreduxreact-reduxmern

"Type 'Unknown' cannot be assigned to the specified type: Typescript Error encountered while using

I encountered an error message in my Redux Observable setup. Any advice on how to resolve this issue? The error states: 'Argument of type 'OperatorFunction<ITodo[], Action<{ params: { url: string; }; } & { result: { todos: ITodo[]; }; ...

typescriptreduxredux-observable

React-Redux Error: The function this.props.AppendCharacter is not defined

I have been looking for a solution to my issue but couldn't find anything that matches it. I am working on creating a calculator app using React & Redux, and whenever I click on one of the number buttons, I receive an error message saying "this.props. ...

javascriptreactjsreduxreact-redux

Redux toolkit does not synchronize with Socket.io

Imagine a scenario where you have developed a chat app similar to WhatsApp Web. In this app, the chat section displays all chats on the left and in the middle. Upon user login, the first contact is saved in the Redux store as selectedChatUser. All the cha ...

reactjssocketsreduxnext.jssocket.io

Modifying state within reducers is not allowed

Encountered the following error while using @ngrx/store: index.js?4b23:19 State mutation is prohibited inside of reducers. (anonymous) @ index.js?4b23:19 (anonymous) @ index.ts:54 rootReducer @ index.ts:70 _initialStateFactory @ ng2.ts?2a33:24 AppModule ...

angulartypescriptreduxngrx

Is there a way to minimize the number of Ajax calls on a React-Redux web application?

After spending 3 months diving into the world of React-Redux, I can confidently say that Redux is a brilliant concept. During my exploration of Redux, it became clear to me that Redux operates like a global variable, defined as STORE. This means that in a ...

reactjsreduxreact-redux

What is the process for bringing in a reducer from createSlice into store.js using @reduxjs/toolkit?

Can someone please provide guidance on how to correctly export the todos reducer from todosSlice using createSlice @reduxjs/toolkit, and then import it into the store using configureStore? Below is my todosSlice file : //todosSlice file import {cr ...

reactjsreduxredux-toolkit

Input the date manually using the keyboard

I am currently utilizing the rc calendar package available at https://www.npmjs.com/package/rc-calendar When attempting to change the year from 2019 to 2018 by removing the "9," it works as expected. However, when trying to delete the entire date of 1/15/2 ...

javascripthtmlreactjsreduxmaterial-ui

Retrieving properties from a selector's output function

My situation is similar to the scenario described in the accessing react props in selectors documentation. However, in my case, let's assume that the visibilityFilter is coming from the props. Is there a way to achieve something like the following? export ...

javascriptreactjsreduxreact-redux

The type '{}' is lacking the 'submitAction' property, which is necessary according to its type requirements

I'm currently diving into the world of redux forms and typescript, but I've encountered an intriguing error that's been challenging for me to resolve. The specific error message reads as follows: Property 'submitAction' is missing in type '{}' but require ...

javascriptreactjstypescriptreduxredux-form

When utilizing getSession() in middleware with next-auth, user credentials appear to be absent

Trying to retrieve user credentials from JWT & Session using callbacks import NextAuth from "next-auth/next"; import CredentialsProvider from "next-auth/providers/credentials"; import User from "../../../models/user"; i ...

reduxnext.jsnext-auth

Redux (RangeError): The call stack has exceeded its maximum size limit

After successfully adding Redux for state management in my project, everything was working fine until I introduced reducers and middleware to fetch data. The problem arose when I started running the app and using dispatch (not necessarily on new actions), ...

reactjsreduxreact-redux

Delving into React Redux: Techniques for passing target values in action payloads

I am curious about how I can pass the action payload using my input value in my component. For example, I have email and password inputs as shown below: <input type="email" value={this.state.email} onChange={this.handleChange}/> <input type="pas ...

reactjsredux

When attempting to utilize the dispatch function in a class-based component, an invalid hook call error may

I am a beginner with react-redux. I currently have this code that uses react, redux, and TypeScript. The code utilizes a class-based component and I am attempting to use dispatch to trigger an action to increment the value of counter. However, I encountere ...

reactjstypescriptreduxreact-redux

Since integrating redux-persist, accessing the current state of the redux store has become a challenge

For the past two days, I've been searching for answers to my problem without any luck. It seems like no one else is experiencing the exact issue I'm having, so I must be missing something obvious. Ever since I added redux-persist, I can no longer referenc ...

typescriptreduxredux-persist

Notify user when Redux action is completes in ReactJS/Redux application

I've been working on a custom notification component that should display a message and then hide itself after a few seconds when certain redux actions, like login_fail, are triggered. However, I'm facing an issue where the message briefly pops up ...

reactjsredux

Issue encountered when attempting to invoke a reducer function for state modification

It seems like I'm overlooking something when trying to call a reducer function from redux using mapDispatchToProps, but the missing step eludes me. This is the code for the reducer: case "CHANGE_COMPLETED": return (state = { ...state, ...

reactjsreduxreact-reduxmaterial-ui

Assigning value to a state within a map function of a reducer: A guide

Attempting to retrieve the type value of a clicked card and I am expecting to extract the type of that card. The state.memoryCards shows the following output in the console: 0: {name: "Aircraft", type: "200", maxSpeed: 880, imageName: "a1", …} 1: {name ...

reactjsreduxreducers

Exploring the capabilities of Redux Toolkit's createEntityAdapter in designing versatile data grids

Seeking guidance on utilizing createEntityAdapter from Redux Toolkit. In my application, I display package information and details using the master/detail feature of the AG Grid library. Packages are loaded initially, followed by fetching detailed data as ...

javascriptreactjsreduxredux-toolkit

Where should the logic for the Redux app be implemented for optimal performance?

My react-redux app features an action-creator that filters a list of objects based on a specified title: export const filterItems = (title) => dispatch => { axios.get(`/api/items/?title=${title}`) .then(res => { dispatch({ ...

javascriptreactjsreduxreact-reduxredux-thunk

Transferring AgGrid context in a functional React component

I have been working on a component that utilizes AgGrid to display a table, with the data sourced from a Redux selector. My goal is to include a button within a cell in the table that triggers an action based on the specific row's data. However, I a ...

reactjstypescriptreduxag-grid

What is the best method for accessing a store in Next.js with Redux Toolkit?

Currently, I am working on incorporating integration testing for my application using Jest. To achieve this, I need to render components in order to interact with various queries. However, in order to render a component, it must be wrapped in a Provider to ...

typescriptreduxnext.jsjestjsredux-toolkit

What is the method to initialize a Stripe promise without using a React component?

I have encountered an issue while implementing a Stripe promise in my React app. The documentation suggests loading the promise outside of the component to prevent unnecessary recreations of the `Stripe` object: import {Elements} from '@stripe/react-s ...

javascriptreactjsreduxstripe-payments

React and Redux: Error Alert - A change in state was detected during dispatch operations

While using 'controlled' components (utilizing setState() within the component), I am encountering an intermittent error when trying to save form data. The UserForm's onSave function calls back to the saveUser method in the component code provided below. ...

reactjsredux

The trick to organizing an array in useSelector() without triggering endless re-renders

I'm currently attempting to display a sorted list of anecdotes by utilizing useSelector() within the Redux framework for this exercise in my current course. However, every time I try to access the anecdotes from the state, I consistently encounter th ...

reactjsreduxreact-reduxredux-toolkitreact-fullstack

What is the most widely-accepted way in React-Redux to transmit elements or references between individual components?

I am working on transitioning a section of code from using local React hooks to managing the state in Redux, specifically focusing on adapting the example that includes a Popover menu. The Popover menu requires the specification of an anchorEl element to d ...

reactjsreduxmaterial-ui

Encountering a WriteableDraft error in Redux when using Type Definitions in TypeScript

I'm facing a type Error that's confusing me This is the state type: export type Foo = { animals: { dogs?: Dogs[], cats?: Cats[], fishs?: Fishs[] }, animalQueue: (Dogs | Cats | Fishs)[] } Now, in a reducer I&a ...

javascripttypescriptreduxredux-toolkit

What location is ideal for making API calls with React and Redux-thunk?

After extensively searching on StackOverflow.com and across the internet, I couldn't find a similar question. Therefore, please refrain from giving negative reputations if you happen to come across one as I truly need reputation at this point in my life! ...

javascriptreactjsapireduxredux-thunk

What potential issues arise from utilizing useRef alongside useSelector?

Although I have the capability to access the store by using thunks and/or global stores, I avoid binding my component to the Redux store. This is because the component will be utilized with various stores both inside and outside of the project. The compone ...

javascriptreactjsreduxuseselector

I'm encountering an authentication issue while passing an axios configuration object containing an authorization token. Can anyone provide insight on why this is happening? Using

I am currently developing a small social networking application and have implemented a feature for users to like posts. To ensure security, I have set up an authentication middleware as shown below: const auth = async (req, res, next) => { // check he ...

node.jsreactjsredux

Is it possible to ensure only one value is set as true in useReducer without manually setting the rest to false

I am seeking a more efficient method to ensure that only one value is set to true while setting the rest to false I came across this Python question and answer recommending an enum (I am not very familiar with that concept) Currently, I have the followin ...

javascriptreactjsreduxreact-hooksuse-reducer

React functional component fails to update upon form submission

I am currently working on developing a functional component using Redux hooks that allows the user to edit a note. Everything appears to be functioning correctly, but when I submit the form with changes, it reloads itself without any updates being made. It ...

reactjsformsreduxreact-redux

Evaluating Material UI Radio Checked Value

I have created a functional component in React that utilizes Redux with React Hooks. For testing, I am using Jest along with Enzyme. The component contains Material UI Radio buttons which are rendered as shown in the code snippet below: <RadioGroup> ...

reactjsreduxreact-reduxmaterial-uireact-hooks

Mastering Redux Toolkit - Ensuring Payload Type Verification is in Place when Invoking an Action Creator

I have been utilizing the redux toolkit for a while now and I appreciate how it helps in reducing redundant code. I am also interested in incorporating typescript, but I am facing challenges with getting the typechecking of an action payload to function pr ...

typescriptredux

Excessive API requests can occur when Redux dispatches an action multiple times

Utilizing the Jikan API for anime, my objective is to showcase promo thumbnails of new anime shows. This involves two separate API calls: one to retrieve the latest anime shows: export const get_new_anime = () => `${base_url}search/anime?q&order_b ...

javascriptreactjsreduxreducers

Call a function following the dispatch action within a separate component in my React Native application

I need to trigger a function after dispatching something in another component. I cannot use promises as a solution. For instance, I want to dispatch an action in Component 1 and then call a function in the corresponding component that starts an animated ...

reactjsreact-nativereduxreact-redux

In a React app, there are instances where `localstorage.getitem('key')` may result in returning null

I've encountered a strange issue while building a login form that sets a JWT token in localstorage. The problem arises when, despite being able to see the token in my console.log, setting localstorage.getitem('idToken') sometimes returns nul ...

javascriptreactjsreduxjwtaxios

At the rendering of App.js, React and Redux collaborate to dispatch an action three times

I am encountering an issue with this section of code while utilizing Redux for state management. The expected behavior is to trigger the dispatcher (noted with a comment) only once when the user logs in, but it is being called three times every time App. ...

reactjsreduxreact-router-domdispatch

A guide to creating a dynamic form using Material-UI components in React Redux: How can I easily add and manage input fields?

Currently, I am in the process of updating my code from a React-Flux-Bootstrap application to Redux with Material-ui. My main goal is to create a form that initially has one input field (e.g., title) and then allows users to add multiple extra inputs by cl ...

reactjsreduxmaterial-ui

What impact does reselect have on the visual presentation of components?

I'm struggling to grasp how reselect can decrease a component's rendering. Let me illustrate an example without reselect: const getListOfSomething = (state) => ( state.first.list[state.second.activeRecord] ); const mapStateToProps = (state ...

javascriptreactjsecmascript-6reduxreselect

Comparison Between React-Redux mapStateToProps and Inheriting Props from ParentsIn the

Excuse my lack of experience, but I am currently delving into the world of react-redux and trying to grasp the concepts as I progress. Situation: In my main component within a react-redux application, I have the following snippet at the end: function map ...

javascriptreactjsreduxreact-redux

Shopping cart with Redux implemented in React.js

Why do I encounter an issue where clicking "Add to cart" only registers a single change even after multiple clicks, and the item doesn't get added to the cart? How can this be resolved? The desired functionality is for the 'cart' array to store the value w ...

reactjsreduxreact-reduxshopping-cart

Expanding cards with Material-UI and React seems to be a challenge when using an expander

I've recently integrated a Card component into my project, sourced from material-ui's official website. However, I'm encountering an issue where the CardHeader does not expand upon clicking. This is the structure of my Component : import React, { Compon ...

javascriptreactjswebpackreduxmaterial-ui

Can state values be utilized as content for Meta tags?

I am looking for a way to display image previews and titles when sharing a page link. In order to achieve this, I am using the Nextjs Head Component. The necessary details are fetched on page load and used as content for the meta attributes. let campaign = ...

javascriptreactjsreduxnext.jsmeta-tags

Converting Redux to use Immutable.js: A step-by-step guide

I am eager to learn how to utilize immutable.js, but I am struggling with transforming my reducer to be immutable-friendly. Despite searching for examples on GitHub, most are quite basic and not providing the guidance I need. Additionally, my component is ...

reactjsreduximmutable.js

React-dropzone experiencing delays in loading new files for readers

Is there a way to handle conditional responses from an API and assign the desired value to errorMessageUploaded? I'm looking for a solution to receive error messages from the API, but currently, the errormessageupload variable is not being set without com ...

javascriptreactjsreduxdropzone.jsreact-dropzone

Having Issues with Material-UI Lists Rendering?

I am having an issue with rendering a list of posts on the index page. I can successfully create posts by clicking the 'Add Post' button and submitting the form on the /posts/new route. However, the list of posts is not showing up on the index pa ...

reactjsreduxreact-routermaterial-ui

Endless scrolling with redux and react

I'm facing an issue while trying to implement infinite scroll in a React-based application that utilizes Redux for state management. I am attempting to dispatch an action on page scroll but have been unsuccessful so far. Below is my code snippet: // ...

javascriptreactjsnpmreduxsingle-page-application

Utilize the get method to showcase data in a material UI table for a React application

Just starting out with React. Managed to create a table component with hard-coded data. However, I now have all the data stored in table.json. Can someone guide me on how to fetch values from table.json using an axios get request an ...

htmlreactjsreduxaxiosmaterial-ui

State remains unchanged as reducer fails to update

I am attempting to create a new function in order to update a specific property within an object. Unfortunately, I am encountering difficulties when it comes to storing and updating the new state information. Reducer export default function replaceCardN ...

reactjsreact-nativereduxreact-reduxreducers

Invoke an ActionCreator within a different ActionCreator

Calling an ActionCreator from another file is proving to be a challenge... The products.ts file contains the ActionCreators and Reducers for Products... import { setStock } from './Store.ts'; //.... export const addProduct = (product: IProduct) => asy ...

reactjstypescriptredux

Integrating Next.js with a authentication provider and a Redux provider

During the development of my Next js project, I incorporated Next auth using import {Provider} from 'next-auth/client' to wrap the <Component /> in _app.js. However, I also want to integrate Redux into the project. This involves importing {Provider} ...

javascriptreactjsreduxnext.jsnext-auth

Centering form fields in ReactJS using Material UI

I'm currently facing a challenge trying to center-align my react form. Below is the structure of my form: The technology I am using is Material UI for ReactJS <Grid item xs={12}> <Grid item xs={12}> <FormGroup noVa ...

reactjsreduxmaterial-ui

Error encountered with the root reducer due to data type mismatch

Within my Redux store setup, I have a persistedReducer initialized to include the redux-persist config and the "rootReducer": client/src/redux/store.ts: import { configureStore } from '@reduxjs/toolkit'; import { persistStore, persistReducer } from 'redux ...

typescriptreduxredux-toolkit