Be careful with mapStateToProps, you should only select the part of the store you're interested in, otherwise performance problems could occur

const mapStateToProps = state => ({auth: state.auth});

A little explanation how react-redux connect works,

1. each time there is a modification in the store (from the reducers), the mapStateToProps functions of all the connected components are executed
2. if the one prop in the returned object is different from the previous one (the operator === is used) then the component is re-rendered otherwise it does nothing.

In your example, as you select all the props of the store, your component will be re-rendered for each modification in the store

You have entries as a dependency to your useEffect - every time getEntriesAction is dispatched it fetches entries and creates a new object in state, which tells react that entries has been updated (it's a new object with a new reference), which reruns the useEffect, which dispatches getEntriesAction again, which... leads to an infinite loop.

I think this happens because the useEffect gets called during the first render, it executes dispatch that calls your reducer which returns a new object { dataContextInitialState }.

The new obect is passed down to your component, useEffect checks if the dataContext object is the same as in the previous render, but it is different because it's a new object so it re-executes the useEffect and you have the loop.

A possible solution

From my understanding with this piece of code

const dataContextInitialState = { test: 1 };

case "update":
  return {
    dataContextInitialState,
  };

your state becomes this:

{
  dataContextInitialState: {
    test: 1
  }
}

I guess that what you wanted was to have a state which is an object with a key names test, you can try modifying your code like this:

case "update":
  return dataContextInitialState;

Post here that useEffect you're having an issue with.

Remove users from the useEffect dependency, because you want to fetch users when component mounts, not each time the users is changed.useEffect( useDispatch().dispatch(getUsers),[]) // Now, it will fetch users ONLY ONCE when component is mountedExplanation:// Case 1useEffect(() => { console.log("Mounted") // Printed only once when component is mounted}, [])// Case 2useEffect(() => { console.log("users changed") // Printed each time when users is changed}, [users])So, if you do fetch in Case 2, it will change users which will retrigger the hook which will fetch the users again which changes the users and causes the hook to retrigger → This is an infinite loop.Update:Why is state.users getting changed (in this code), as detected by useEffect, even when values of state.users are “SAME” (Same values)?Whenever GET_USERS action is dispatched, reducer returns new state ({ ...state, users: action.payload }). It does so even when value of action.payload holds the same value of users.This is why useEffect receives new users array. (They do shallow comparison.)Note that, [1, 2,3] is not equal to [1, 2,3] i.e. [1, 2,3] === [1, 2,3] returns false.If for some reason, you want to return the same redux state, do return state in the reducer. This is often what we do in the default case of switch of reducer.

In the current implementation, when your page is rendered, db.collections runs and you set state setUserProfiles(documents) which renders your app and again db.collections runs. to prevent this you should run db.collections in useEffect.

// fetch users only when your app renders
useEffect(() => {
    db.collection("customers")
      .doc(user.info.uid)
      .collection("profiles")
      .get()
      .then((querySnapshot) => {
        const documents = querySnapshot.docs.map((doc) => doc.data());
        setUserProfiles(documents);
      });
  }, []);

have another useEffect

useEffect(() => {
    dispatch(profiles(userProfiles));
  }, [userProfiles]);

this will NOT work neither. setUserProfiles will be causing issue. Because when app renders, you fetch data, you set the state, change the userProfiles, this will rerender app again.

The problem with your code is you do not need setUserProfiles. instead in db.collections() when you get the documents, you dispatch the documents and then access the profiles from redux with useSelector

// fetch users only when your app renders
useEffect(() => {
    db.collection("customers")
      .doc(user.info.uid)
      .collection("profiles")
      .get()
      .then((querySnapshot) => {
        const documents = querySnapshot.docs.map((doc) => doc.data());
        // setUserProfiles(documents); You do not need this
        dispatch(profiles(userProfiles))
      });
  }, []);

Now use useSelector to reach the state in redux

// assuming reducers name is "users"
  const usersState = useSelector((state) => state.users);

now when you use map guard your app

 // make sure you use the correct data
 // you migh need to destructure
 {usersState && usersState.map((profile) => {

Try adding a condition to compare the props. If your component needs it.

componentWillRecieveProps(nextProps){
 if(nextProps.value !== this.props.value)
  dispatch(action()) //do dispatch here 
}