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











up vote
1
down vote

favorite












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.



enter image description here



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.










share|improve this question
























  • 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
    Nov 8 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
    Nov 8 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
    Nov 8 at 7:58






  • 1




    Could you add the git repo so we can see the code?
    – Alex G
    Nov 8 at 9:07










  • 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
    yesterday















up vote
1
down vote

favorite












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.



enter image description here



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.










share|improve this question
























  • 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
    Nov 8 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
    Nov 8 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
    Nov 8 at 7:58






  • 1




    Could you add the git repo so we can see the code?
    – Alex G
    Nov 8 at 9:07










  • 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
    yesterday













up vote
1
down vote

favorite









up vote
1
down vote

favorite











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.



enter image description here



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.










share|improve this 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.



enter image description here



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.







javascript reactjs redux






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 8 at 7:58

























asked Nov 8 at 7:28









winnieTheWind

599




599












  • 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
    Nov 8 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
    Nov 8 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
    Nov 8 at 7:58






  • 1




    Could you add the git repo so we can see the code?
    – Alex G
    Nov 8 at 9:07










  • 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
    yesterday


















  • 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
    Nov 8 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
    Nov 8 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
    Nov 8 at 7:58






  • 1




    Could you add the git repo so we can see the code?
    – Alex G
    Nov 8 at 9:07










  • 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
    yesterday
















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
Nov 8 at 7:47






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
Nov 8 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
Nov 8 at 7:57




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
Nov 8 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
Nov 8 at 7:58




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
Nov 8 at 7:58




1




1




Could you add the git repo so we can see the code?
– Alex G
Nov 8 at 9:07




Could you add the git repo so we can see the code?
– Alex G
Nov 8 at 9:07












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
yesterday




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
yesterday












2 Answers
2






active

oldest

votes

















up vote
3
down vote



accepted










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.






share|improve this answer



















  • 1




    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
    yesterday








  • 1




    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.
    – winnieTheWind
    yesterday




















up vote
1
down vote













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






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














     

    draft saved


    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53203106%2fusing-spread-operators-for-redux-in-react-array-mapping-problems%23new-answer', 'question_page');
    }
    );

    Post as a guest
































    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    3
    down vote



    accepted










    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.






    share|improve this answer



















    • 1




      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
      yesterday








    • 1




      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.
      – winnieTheWind
      yesterday

















    up vote
    3
    down vote



    accepted










    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.






    share|improve this answer



















    • 1




      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
      yesterday








    • 1




      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.
      – winnieTheWind
      yesterday















    up vote
    3
    down vote



    accepted







    up vote
    3
    down vote



    accepted






    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.






    share|improve this answer














    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.







    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Nov 8 at 9:41

























    answered Nov 8 at 9:23









    Ryan

    8751116




    8751116








    • 1




      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
      yesterday








    • 1




      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.
      – winnieTheWind
      yesterday
















    • 1




      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
      yesterday








    • 1




      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.
      – winnieTheWind
      yesterday










    1




    1




    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
    yesterday






    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
    yesterday






    1




    1




    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.
    – winnieTheWind
    yesterday






    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.
    – winnieTheWind
    yesterday














    up vote
    1
    down vote













    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






    share|improve this answer

























      up vote
      1
      down vote













      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






      share|improve this answer























        up vote
        1
        down vote










        up vote
        1
        down vote









        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






        share|improve this answer












        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







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 8 at 8:48









        Егор Ересько

        191




        191






























             

            draft saved


            draft discarded



















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53203106%2fusing-spread-operators-for-redux-in-react-array-mapping-problems%23new-answer', 'question_page');
            }
            );

            Post as a guest




















































































            Popular posts from this blog

            Guess what letter conforming each word

            Port of Spain

            Run scheduled task as local user group (not BUILTIN)