How to compare values from react redux state in hooks

Question

I have recently written a table component using hooks , and every time page loads there is an API call to backend, so meanwhile there is a loading Spinner will be shown until there is an response from the API. I'm using redux as state management, so when there is a response from API , an action is dispatched and state is updated. So the problem here is ,usually in class component we can compare prevProps and nextProps using

componentDidUpdate(prevProps){
  if(this.props.someState !== prevProps.someState){
      // do something
    }
}

but i'm not sure how to achieve the same using Hooks. I also referred this stackoverflow question How to compare oldValues and newValues on React Hooks useEffect?

but this solution doesn't seem to be working in my case . I did try creating custom hook usePrevious and creating a ref to compare current value ,this didn't solve my issue.

Here's my part of code.

let loading = true;

let tableData = useSelector((state) => {
   
    if (
      state.common.tableDetails.data &&
      state.common.tableDetails.status === true
    ) {
      loading = false;
      return state.common.tableDetails.data;
    }
   
    if (
      state.common.tableDetails.data &&
      state.common.tableDetails.status === false
      
    ) {
      loading = true;
    }
    return [];
  });

// table component

<Fragment>
  { 
   loading === true ? <Spinner />  :  <TableComponent tableData={tableData }/>
   }
</Fragment>

So whenever the component loads, if there is any data present in redux state , that data is shown and no comparison is done for prevProps and nextProps because of which Loading spinner won't show up and after a response of newly called api state will be update and new data will be shown in Table.

UPDATE 1: Here's the code for dispatch and action and reducer

 useEffect(() => {
    
    dispatch(fetchDetails(params.someID));

  }, [dispatch, params.someID]);

Action File

export const fetchDetails = (data) => (dispatch) => {
  axios
    .post(
      `${SomeURL}/fetchAll`,
      data
    )
    .then((res) => {
      if (res.data.status) {
        dispatch({
          type: FETCH_DETAILS,
          payload: res.data,
        });
      }
    })
    .catch((err) => console.log(err));
};

Reducer File

const initialState = {
  tableDetails: {},
};

export default function (state = initialState, action) {
  switch (action.type) {
    case FETCH_DETAILS:
      return {
        ...state,
        tableDetails: action.payload,
      };

    default:
      return state;
  }
}

Have you tried using [React.memo](https://reactjs.org/docs/react-api.html#reactmemo)? — Nirmalya Ghosh, Aug 23 '21 at 17:10

Hartha · Accepted Answer · 2021-08-26T12:10:23.697

You can implement simple validation to achieve what you want. I will assume your tableData has an id, then you can validate like this:

useEffect(() => {
    // don't fetch the same table
    if(tableData?.id !== params.someID {
      dispatch(fetchDetails(params.someID));
    }
}, [dispatch, params.someID, tableData?.id]);

UPDATE 1

To compare previous table data to new feched one you could do that in the action creator:

move loading state to redux store.
use getState function which is the second argument recived by action creator (assuming that you are using redux-thunk)
before dispatching the action, compare new tableData with data in the store(prev tableData).
do your check and update loading state.

export const fetchDetails = (data) => (dispatch, getState) => {
  axios
    .post(
      `${SomeURL}/fetchAll`,
      data
    )
    .then((res) => {
      if (res.data.status) {
        const prevTableData = getState().tableData;
        
        // compare prev and new table data
        if(isDiff(prevTableData, res.data) {
            // Do something...
        }
        dispatch({
          type: FETCH_DETAILS,
          payload: res.data,
        });
      }
    })
    .catch((err) => console.log(err));
};

The problem is not about fetching/ dispatching the action. Its about showing Loading Icon inside the table ,every time the page loads and once the response has been fetched from API , the response can be shown in table. If the redux state has some old data then that old data is being shown instead of loading icon. I want to compare prevprops and nextprops to set the loading state true/false depending on the api response. — jarivak, Aug 26 '21 at 09:22

score 2 · Answer 2 · edited Aug 27 '21 at 11:43

The right way is to use redux reselect package https://github.com/reduxjs/reselect. Redux team recommends it.

reselect is designed specifically for this kind of scenarios. It also uses memoization under the hood. You can make your custom selectors and use them in scenarios like this.

You can make a seperate file for all the reselect functions like this

//select file (eg: selectors.js)
import { createSelector } from "reselect";

const tableDetails = state => state.common.tableDetails;

function checkDataFunction(details){
    if (
      details.data &&
      details.status === true
    ) {
      return {
        loading: false,
        data: details.data
      }
    }
   
    else if (
      details.data &&
      details.status === false
      
    ) {
      return {
        loading: true,
        data: []
      }
    }

    return {
      loading: true,
      data: []
    };
}

//redux selector
//enables you to make your own custom selector
export const checkData = createSelector(
  tableDetails,
  checkDataFunction
);

Now in your main component file where you want to use this just import it and use it as any other selector

//main component file (eg: App.js)
import {checkData} from './selectors';


export default function App(){
  const tableData = useSelector(checkData);

  useEffect(() => {
    //continue with your logic here
  },[tableData.loading])

  //...
}

How to compare values from react redux state in hooks

2 Answers2

UPDATE 1