CODEWITHSUNDEEP
reactjsreduxreact-redux
mastercool
mastercool

Reputation: 523

What happens when a reducer returns 'state' in React?

If I have a contactReducer that looks like this: 

import {
  GET_CONTACTS,
  DELETE_CONTACT,
  ADD_CONTACT,
  EDIT_CONTACT,
  GET_CONTACT,
} from "../actions/types";

// the state the holds the contacts
const initialState = {
  contacts: [
    {
      id: 1,
      name: "John Doe",
      email: "[email protected]",
      phone: "555-555-5555",
    },
    {
      id: 2,
      name: "Karen Williams",
      email: "[email protected]",
      phone: "444-444-4444",
    },
    {
      id: 3,
      name: "Henry Johnson",
      email: "[email protected]",
      phone: "333-333-333",
    },
  ],
  contact: {},
  testProp: {},
};

export default function (state = initialState, action) {
  switch (action.type) {
    case GET_CONTACTS:
      console.log("get contacts");
      return {
        ...state,
      };
    case DELETE_CONTACT:
      return {
        ...state,
        contacts: state.contacts.filter(
          (contact) => contact.id !== action.payload
        ),
      };
    case ADD_CONTACT:
      let newArray = state.contacts.slice(); // get the current contacts array
      newArray.unshift(action.payload); //push on the new contact to the beg of array
      return {
        ...state, //take the existing state..
        contacts: newArray,
      };
    case EDIT_CONTACT:
      console.log("trying to edit");
      return {
        ...state,
        contacts: state.contacts.map((contact) =>
          contact.id == action.id ? (contact = action.payload) : contact
        ),
      };

    case GET_CONTACT:
      const selectedContact = getSingleContactFromId(state, action.payload);
      console.log("look here");
      console.log(selectedContact);
      return {
        ...state,
        contact: selectedContact,
        testProp: { test: "test prop" },
      };

    default:
      console.log("testing action in default");

      return state;
  }
}

function getSingleContactFromId(state, id) {
  var contact;
  console.log("get single contact");
  for (var i = 0; i < state.contacts.length; i++) {
    contact = state.contacts[i];
    if (contact.id == id) {
      return contact;
    }
  }
}

What is actually happening when the reducer returns? Where does it return to? For example, I send a dispatch to the reducer like this this.props.addContact(newContact); But, I don't see that I do anything with the returned object anywhere after this. In another file, is where I grab things from the state, so does return really just mean it is updating the state?

Upvotes: 0

Views: 582

Answers (1)

MorKadosh
MorKadosh

Reputation: 6006

Assuming you use combineReducers, the returned state from a specific reducer will now be the updated state of the state chunk represented by this reducer. Then, any connected component will receive the new state and will re-render.

This is a high-level description obviously.

More information can be found here: https://react-redux.js.org/using-react-redux/connect-mapstate

Upvotes: 1

Related Questions