CODEWITHSUNDEEP
javascriptreact-nativereduxreact-redux
Walter Monecke
Walter Monecke

Reputation: 2558

Reducer not returning the expected empty object

Using React-redux here and having a bit of an issue, that some of you might help with.

The user can create 'Jobs' (posts) and also remove them. Adding them is no issue and the reducer returns what is expected. However, once I delete a job from the (firebase) database I trigger a new fetch for the current jobs, but the reducer still returns the old jobs. Am I missing something?

Before deleting, this is how the jobs objects looks like:

activeJobs= {
  -KrkPPy4ibSraKG-O49S: {
    title: 'Help',
    location: 'etc,
    ...
  },
  -KrkPPy4ibSraKG-O49S: {
    title: 'Help',
    location: 'etc,
    ...
  } and so on
}

When I delete them all I get this {} back from the server. Expected. What is not expected is that my reducer still returns the old jobs and my components do not re-render.

I dispatch an action after fetching the jobs:

firebase.database().ref(`/jobs/activeJobs/${currentUser.uid}`)
      .on('value', snapshot => {

        console.log('new activeJobs ===', snapshot.val());

        dispatch({
          type: FETCH_JOBS_SUCCESS,
          payload: snapshot.val()
        });
      });

snapshot.val() does contain the new updated jobs.

Then here is the reducer that handles the action:

switch (action.type) {
case FETCH_JOBS_SUCCESS:

  // ...state contains the OLD jobs and action.payload contains {}. Why is is not overriding it the old jobs?

  return { ...state, ...action.payload  };
default:
  return state;
}

Why is my reducer failing?

Upvotes: 0

Views: 194

Answers (2)

Robert jardonneau
Robert jardonneau

Reputation: 444

The { ...state, ...action.payload } syntax actually mean : build a new object by taking every prop of state and adding every props of action.payload. In your case, you just get a new object that is similar to state, since ...action.payload is an empty object.

Upvotes: 2

hairmot
hairmot

Reputation: 2975

Change your action to 

return Object.assign({}, state, {activeJobs : action.payload});

Upvotes: 0

Related Questions