Using spread operators for redux in react? Array mapping problems?

Question

I'm currently revising my understanding of redux and react. React components are working, and I have a knex database setup along with it. I have a reducer using the following syntax.

import { FETCH_POSTS, NEW_POST } from '../actions/types';

const initialState = {
  items: [],
  item: {}
}

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_POSTS:
        return {
        ...state,
        items: action.payload
    };
      case NEW_POST:
      return {
        ...state,
        item: action.payload
     };
    default:
      return state;
  }
}

Here is an error I get. It doesn't seem to like the spread operator.

bundle.js:445 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:/workspace/study-related-projects/apistudy7112018/1.0/client/reducers/postReducer.js: Unexpected token (18:8)

It doesnt like the current syntax Im using, which was used from this video tutorial from Traversy Media here. The tutor implements the middleware differently to how I've done it, but didn't think that would be a problem. So just incase, I decided to push to the items array like so in the reducer:

import { FETCH_POSTS, NEW_POST } from '../actions/types';

const initialState = {
  items: [],
  item: {}
}

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_POSTS:
      return state.items.push(action.payload)
    default:
      return state;
  }
}

instead of the return object with the spread operator.

and then call dispatch in the componentWillMount() function in react..

Which turned out fine, however now it has become more difficult to map the array for printing out the data in a component.

If I console log the this.props.payload.posts, I recieve the items but Im unsure if I can access it because the next array after posts has no name, just number 0. I tried this.props.payload.posts[0], but that didn't seem to work. This is giving me trouble mapping the data with the map array function.

Generally, If all is successful I can then use mapToProps function, then:

this.props.items.posts.map(post) => {
  return post.name
})

But I've hit a wall with these two solution. This problem came about due to me trying to implement a different way of using redux, as opposed to the way I was used to before. This is all for my own study and training.

Could anyone help me understand these two problems? One is that, javascript doesn't like the spread operator syntax I'm using and spits back that error. Second is, trying to get to the raw data through the items array. If anyone could help me out, I'd really appreciate it. Thanks.

Edit: I may put up a git repo in a bit so everyone can see the code I'm working on.

The code as posted in your question does not cause build failures with me. How your code is outlined suggests to me you're using notepad or something to edit your code. Maybe you can use something like vscode to spot syntax errors more easily. Also you should never mutate state in your reducers so you should not push items in the array. — HMR
– HMR, Commented Nov 8, 2018 at 7:47
Thanks. I'm am using vscode, and everything else is working except for the reducer. Also thanks for mentioning not to mutate the state, Ill keep that in mind. I should mention that I've managed to create a reducer in the past, but it didn't have a spread operator, so my attempt this time round is to use the spread operator. — winnieTheWind
– winnieTheWind, Commented Nov 8, 2018 at 7:57
In your original reducer you're assigning to items in one case and item in the other, which marries up with the error message, which is telling you the error is on line 18. I would suggest you need to use items on line 18. — Hayden Hall
– Hayden Hall, Commented Nov 8, 2018 at 7:58
Hey there. Ive been running low on time, but I still intend to upload a condensed version since this is still a work in progress. Much appreciated. — winnieTheWind
– winnieTheWind, Commented Nov 12, 2018 at 6:02

Ryan · Accepted Answer · 2018-11-08 09:41:17Z

4

Assuming that you're using Babel and webpack to transpile and bundle your source code respectively, it's important to note that by default the spread operator in ES2015 is not supported for objects, only arrays; support for object spread operators is still a Stage 3 proposal in TC39.

To support objects you need to use the Babel plugin @babel/plugin-proposal-object-rest-spread (for Babel 7). That should take care of the Unexpected token error.

For your other example with push, I recommend against using array methods that mutate the array. It goes against one of the three fundamental principles of Redux, regarding pure functions. Your reducers should be pure to keep your state immutable, as each change to your state (dispatched action) represents a snapshot of your state.

Instead of using push for arrays, you can use the spread operator:

return {
  ...state,
  items: [
    ...state.items,
    action.payload,
  ],
};

(or something to that effect)

Another note: don't rely on componentWillMount() for too much longer; it was deprecated in React 16.3 and will be removed entirely in React 17. See https://reactjs.org/docs/react-component.html#unsafe_componentwillmount for more information. If you're fetching data through AJAX or some other asynchronous method, it's better to use componentDidMount() instead.

edited Nov 8, 2018 at 9:41

answered Nov 8, 2018 at 9:23

Ryan

1,38214 silver badges20 bronze badges

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

2 Comments

winnieTheWind Over a year ago

Thank you so much. This explains a lot. Initially my previous code had only an array as the initial state, and since I only followed portions of the tutorial from above, I had an object as the initial state and I probably missed that aspect about redux. I'm still wrapping my brain around redux and the principles of redux have eluded me somewhat. I'm short on time but I still intend to post an update to show people where I'm at.

winnieTheWind Over a year ago

I currently have a functioning get and post working with redux, which is then adding to the db. Now I have a few other problems regarding the db but I'll leave that for another time. Also, thanks for updating me on react. That's good to know. I am using an older version of react I believe so yes, I'll work on a new version of the code so I can keep up to date.

Егор Ересько · Accepted Answer · 2018-11-08 08:48:37Z

1

for example, from the first code I would venture to suggest that action.payload is an array so in the second case, you need to push the contents of the array

case FETCH_POSTS:
  return state.items.push(...action.payload)

but I also recommend not to use mutate the state

answered Nov 8, 2018 at 8:48

Егор Ересько

471 silver badge2 bronze badges

Collectives™ on Stack Overflow

Using spread operators for redux in react? Array mapping problems?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related