How to Log Draft State Values

Logging state values may seem like a trivial task that shouldn’t make it into a course. What could be difficult about placing a console.log within a reducer created via createSlice?

Well, we’ll arrive at an easier answer by just going on to add a console.log!

The problem with console.log

Whenever we fetch new tweets, log the current state before and after we set the isLoading state:

const finderSlice = createSlice({
  name: "finder",
  initialState,
  reducers: {
	// ...
    isLoadingTweets(state) {
	  // look here 👇
      console.log("Before isLoading: ", state);
      state.isLoading = true;
      console.log("After isLoading: ", state);
    },
  },
});

It’s very common practice to want to perform a quick console.log while debugging. Let’s see the result of the code block above.