Add object to array in Redux?

Question

I'm trying to add a element to a array, which is called allLogbooks. This array contains objects called Logbook. My issue is, how do I fit in code so that it adds the new element to the array which is declared in my reducer? This is my initial state:

const initialState = {
  isFetching: false,
  error: undefined,
  isRegistered: false,
  isUpdated: false,
  hasChecked: false,
  isError: false,
  registerStepOne: true,
  registerStepTwo: false,
  registerStepThree: false,
  registerStepFour: false,
  logbooks: undefined,
  allLogbooks: [],
  userInfo: undefined,
  logbookAddSuccess: false,
  newLogbook: undefined,
  graphFilter: 1
}

This is my reducer:

case ADD_LOGBOOK_SUCCESS:
    allLogbooks.push(action.newLogbook);
      return {
        ...state,
        isFetching: false,
        logbookAddSuccess: true,
        isUpdated: true,
        isError: false,
      }

And this is my action:

function addLogbookSuccess(newLogbook) {
    return {
        type: ADD_LOGBOOK_SUCCESS
        }
}

I then make a POST call to a nodejs server, where it will respond with a message if it was successful, and the logbook which was just created. the following data is what it returns:

{
    "success": true,
    "logbook": {
        "created_by": "",
        "created_at": "",
        "_id": "",
        "__v": 0
    }
}

I then dispatch in the API call, as such:

.then(data => data.json())
            .then(json => {
                Keyboard.dismiss();
                dispatch(addLogbookSuccess(json.logbook));

            })
            .catch(err => dispatch(addLogbookFailed(err)))

I've substituted this by using AsyncStorage to access the array abroad all my views, but I know this is wrong.

Dan · Accepted Answer · 2018-03-13 17:53:08Z

2

I am struggling a little to comprehend your question so I've tried my best. Please let me know if I'm completely off with my answer.

Your reducer:

case ADD_LOGBOOK_SUCCESS: {
  const newLogbook = action.payload;
  return {
    ...state,
    isFetching: false,
    logbookAddSuccess: true,
    isUpdated: true,
    isError: false,
    allLogBooks: [
      ...state.allLogBooks,
      newLogbook
    ]
  }
}

Your action:

function addLogbookSuccess(newLogbook) {
    return {
      type: ADD_LOGBOOK_SUCCESS,
      payload: newLogbook
    }
}

answered Mar 13, 2018 at 17:53

Dan

8,9229 gold badges46 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

William Pfaffe Over a year ago

Definately on the right track. Sorry if my explanation is abit off. Your code gives me the error [TypeError: Object is null or undefined]. It successfully makes the call to the API and posts the new element, but it doesn't update the redux array allLogbooks. If I refresh Expo, and relog into the app, then it shows up, but only then.

William Pfaffe Over a year ago

I'll add some more of my code to the post, might give more insight as to how I've set it up.

William Pfaffe Over a year ago

Your code works perfectly, I am sorry. The error was a typo. "allLogBooks" instead of "allLogbooks". Thank you so much, makes perfect sense.

Collectives™ on Stack Overflow

Add object to array in Redux?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related