rental is undefined while fetching it from redux-thunk?

user_14942898 0
Viewed 57

Not sure why redux-thunk is not working fine it says rentals is undefined while we correctly import and export it.

if I do normal call without dispatch it does work fine without any issue. is redux-thunk causing issue?

Please guide the same

Reducer.js

 export const houseReducer = (state = [], action) => {
      switch (action.type) {
        case FETCH_HOUSE_SUCCESS:
          return { ...state, data: action.rentals };
        default:
          return state;
      }
    };

Component

import * as action from "../actions";
    function House({ props }) {
      const dispatch = useDispatch();
    
      useEffect(() => {
        const { rentals } = dispatch(action.getHouseSuccess()); //undefined
      }, []);
    
    function mapStateToProps(state) {
      return {
        rentals: state.rentals,
      };
    }
    
    export default connect(mapStateToProps)(House);

Action

export const getHouseSuccess = () => {
  return function (dispatch) {
    setTimeout(() => {
      dispatch({
        type: FETCH_HOUSE_SUCCESS,
        rentals,
      });
    }, 1000);
  };
};

This below statement working fine setTimeout causing issue ? it is calling before render ?

export const getHouseSuccess = () => {
  return {
    type: FETCH_HOUSE_SUCCESS,
    rentals,
  };
};
react-redux reactjs
2 Answers

I think store data should be accessible with rantals instead props

function House({ rentals }) {
  const dispatch = useDispatch();

  useEffect(() => {
    if (rentals) {
      dispatch(action.getHouseSuccess(rentals));
    }
  }, []);

Try this it should work

user_66067000

I don't know how you setup your redux.

This is how I usually set them up:-

A. Reducer
  • /slices/house.js
import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  rentals: []
}

export const houseSlice = createSlice({
  name: 'house',
  initialState,
  // // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    setHouseSuccess: (state, action) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.rentals = action.payload
    }
  }
})

export const { getHouseSuccess } = houseSlice.actions;

// The function below is called a selector and allows us to select a value from
// the state. Selectors can also be defined inline where they're used instead of
// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
export const selectRentals = (state) => state.house.rentals

export default houseSlice.reducer;

B. Store

  • store.js
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import houseReducer from '../slices/house'

export const store = configureStore({
  reducer: {
    house: houseReducer
  },
  middleware: getDefaultMiddleware({
    serializableCheck: false
  })
})
C. App Component
import { Provider } from 'react-redux'
import { store } from '../app/store'

export default function App() {
  return {
    <>
      <Provider store={store}>
        {/* your content... */}    
      </Provider>
    </>
  }
}
D. Component (where you use the redux)
import { useContext, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { selectRentals, setHouseSuccess } from '../slices/house'

export default function House(props) {
  const dispatch = useDispatch()
  const rentals = useSelector(selectRentals)  

  useEffect(() => {
    if(props?.rental) {
      dispatch(setHouseSuccess(props?.rental))
    }
  }, [props?.rental])

  function handleConsoleLogging(data) {
    console.log(data)
  }

  return {
    <>
      {rentals?.length > 0 && handleConsoleLogging(rentals)}
    </>
  }
}
user_129968550
Related