CODEWITHSUNDEEP
react-nativereduxredux-thunk
William Pfaffe
William Pfaffe

Reputation: 325

Add object to array in Redux?

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.

Upvotes: 0

Views: 4018

Answers (1)

Dan
Dan

Reputation: 8794

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
    }
}

Upvotes: 2

Related Questions