Next.js: Spread operator on empty array triggers a Type error on Reducers

[andrew-oko-odion]

Bug report

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
reducer
./lib/route/reducers.js:8
   5 | const reducer = (state = [], action={}) => {
   6 |     switch(action.type) {
   7 |  case actionTypes.ROUTE_SUCCESS:
>  8 |      return [
   9 |      ...state,
  10 |      ...action.data
  11 |      ]

Describe the bug

According to Redux examples, from the Redux documentation, most of the store's state were returning an array, while on all Nextjs examples that relates to Redux, were deliberately returning objects {}

so I tried to return an array and I was hit by the error on the screenshoot
the snippet below was taken from nextjs examples with-redux-saga I only introduced the constant ADD_ITEM on theactions.js file added this on the index.js file

  render () {
      return(
      <div>
          <button onClick={() => this.props.dispatch(addData({full_name: 'kelvin smith', age: 10})) }>Add item</button>
          <Page title='Index Page' linkTo='/other' NavigateTo='Other Page' />
      </div>
      )
  }
}

function reducer (state = [], action) {
    switch (action.type) { 

    case actionTypes.ADD_ITEM:
        return [...state, action.data ]

    case actionTypes.FAILURE:
      return {
        ...state,
        ...{ error: action.error }
      }
    default:
      return state
  }
}

A clear and concise description of what the bug is.

To Reproduce

use with-redux-sage from nextjs examples

Expected behavior

this piece of code is valid in js and its not suppose to trigger an error
[...[]]

const reducer  = (state = [], action = {}) {
switch (action.type) { 

    case actionTypes.ADD_ITEM:
        return [...state, action.data ]

...omitted

Screenshots

System information

• OS: Linux Debian
• Browser: chrome
• Version of Next.js: [email protected] && [email protected]

[timneutkens]

I'm assuming it's triggered because of ...action.data being undefined, which is probably a bug in your code. When spreading an object/array you have to make sure it's not undefined. Or default it like: ...(action.data || {})

I'm going to close this as it's not a bug in Next.js.

[andrew-oko-odion]

@timneutkens It has nothing to do with the action its on the state.

you can check it out, it raises the same error with this code. I just tested it out.

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
reducer
./lib/route/reducers.js:8
   5 | const reducer = (state = [], action={}) => {
   6 |     switch(action.type) {
   7 |  case actionTypes.ROUTE_SUCCESS:
>  8 |      return [
   9 |      ...state,
  10 |      action.data
  11 |      ]

[andrew-oko-odion]

This issue is not resolved

[andrew-oko-odion]

I'm assuming it's triggered because of ...action.data being undefined, which is probably a bug in your code. When spreading an object/array you have to make sure it's not undefined. Or default it like: ...(action.data || {})

I'm going to close this as it's not a bug in Next.js.

Your assumption is wrong, I have pointed you to a way to investigate the bug.
please investigate and reopen the issue
Thank you.

[timneutkens]

It's not a bug in Next.js either way, it's a bug in your code, so please post your question on https://spectrum.chat/next-js.