I am getting this typescript error when returning updated state from reducer: Type ‘(Person | undefined)[]’ is not assignable to type ‘People’ reducer.ts: export type Person = { id: string; name: string; phone: number; email: string; hobbies: string[]; }; export type People = Array<Person>; type State = { people: People; modal: null | string };… Read More Type '(Person | undefined)[]' is not assignable to type 'People'
I need to trigger the same function two times. Once after a certain redux state changed and once after a redux action is fulfilled. Currently i use two separate listeners for it. But i was wondering if it is possible to combine the "predicate" and the "actionCreator" into one listener. But i was not able… Read More Is it possible to listen for a state change and action at the same time with the redux toolkit listenerMiddleware
I wonder if it possible to dispatch an action from another reducer in the API Slice of Redux RTK. Assuming I have this getSomething: builder.query<SomeProps, void>({ query: () => ({ url: "…", headers: { ‘Content-Type’: ‘application/json’, } }), Is it possible to have something in there like onSuccess (assuming the getSomething() returns a 200/anything that… Read More Disptach action inside Redux RTK API Slice
I’m trying to understand redux-toolkit. I need to understand why the Add All Products button isn’t adding all the products to redux store’s state. Although add to cart is working for individual items. I just want to do the same thing but want to pass all products in the argument. Here is the code: import… Read More unable to dispatch action in redux-toolkit
Say I have the following lifecycle actions. builder .addCase(loginUser.pending, (state, action) => { state.isLoading = true; }).addCase(loginUser.fulfilled, (state, action) => { state.isLoading = false; state.user = action.payload; // Change the Page to HomePage – using the location state from navigationSlice toast.success(‘Logged In User!’); }).addCase(loginUser.rejected, (state, action) => { state.isLoading = false; toast.error(action.payload); }); I want… Read More How to change the state of another reducer inside of the extraReducers?
I’m using React-Testing-Library and I have my main.tsx file like this with all the Redux-Toolkit and React-Router wrappers as follows: ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <Provider store={store}> <Suspense fallback={<LoadingSpinner />}> <BrowserRouter> <Routes> <Route path="/*" element={<App />} /> </Routes> </BrowserRouter> </Suspense> </Provider> </React.StrictMode>, ); Now, when I try to test any component that uses any useDispatch or useNavigate the… Read More Using "React Testing library" – How to wrap all my test component with providers
i am trying to call a reducer function from another reducer function. but i get error ‘redux.js:283 Uncaught Error: Reducers may not dispatch actions.’ this is my counter reducer: const counterReducer = (state = initialState, action) => { switch (action.type) { case "INCREMENT": console.log("increment counter",state) store.dispatch({ type: "SIGN_IN", payload: ‘new data’ }) return state +… Read More can we call action function of a reducer from another reducer?
The thunk appears as follows: export const registerUser = createAsyncThunk( "auth/register", async (userData) => { try { const response = await axios.post(REGISTER_URL, userData); return response.data; } catch (error) { // console.log(error.response.data) the output is provided below throw error.response.data; } } ); Output: { "error": "Bad Request", "message": [ "email should not be empty", "email must… Read More Need some help regarding Redux Toolkit
So, I have been making a User Directory Website using react and redux. Now I want to do a pagination of 20users per page from my local json file and I got the first 20 page but when I click on next button the next page doesn’t load . This is my userList.jsx: import React,… Read More next data is not loading in my pagination
I assign multiple objects in one useState and then fetch the data from the database using the redux toolkit and then defined values for those objects but when I do console.log it shows me a state value is undefined but console.log the fetch data from the database is successful. here is the code const {… Read More After assign useState values but got undefined?