how to add an object to an array in store

Question

I have the following code snippets:

action creator:

export function addCategories(cats){
  return {
    type: ADD_CATEGORY,
    cats
  }
}

reducer:

function posts(state = {posts: []}, action) {
  switch (action.type) {
    case ADD_POST: {
      console.log(action.posts)
      return  {...state, posts: [...state['posts'], Object.assign({}, action.posts)]}
    }
    default:
      return state
  }
}

component:

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { addCategories, addPosts } from './actions/index'

class App extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <button onClick={() => { this.props.cats({ name: "stra" }) }}>Add cat</button>
        <button onClick={() => { this.props.posts({ age: 23 }) }}>Add post</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  console.log(state)
  return {
    state
  }
}

const mapDispatchToState = (dispatch) => {
  return {
    cats: (cat) => dispatch(addCategories(cat)),
    posts: (post) => dispatch(addPosts(post))
  }
}

export default connect(mapStateToProps, mapDispatchToState)(App)

the propblem i have is that after the reducer is done, instead of getting the state looking like

{
    // other values
    posts: [] <- values go where
}

i get the state looking like this:

{
    // other values
    posts: {
        posts: []
    }
}

the image above is just what the console prints out when i run the code. Any advice on this would be greatly appreciated as i dont know where im going wrong.

Thanks in advance.

Is the payload of post action expected to be an array or single object? Because it's named addPosts but you don't pass an array to it — NValchev
– NValchev, Commented Oct 13, 2017 at 7:20

HyeonJunOh · Accepted Answer · 2017-10-13 07:47:47Z

2

The reducer which you implement is quite complicate.

Please try below.

const initialState = {
  posts: [],
};

function posts(state = initialState, action) {
  switch (action.type) {
    case ADD_POST: {
      let newState = {posts: state.posts};
      newState.posts.push(...action.posts);

      console.log(action.posts)
      return Object.assign({}, state, newState);
    }
    default:
      return state
  }
}

UPDATE

It is caused by reducer's name posts. You can solve this simply divide state on mapPropsToState like

function mapPropsToState(state) {
  return {
    posts: state.posts.posts,
    cats: state.cats.cats,
  }
}

It is a bad idea to make a reducer's name the same as a variable's name that the reducer contains.

edited Oct 13, 2017 at 7:47

answered Oct 13, 2017 at 6:53

HyeonJunOh

7641 gold badge8 silver badges23 bronze badges

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

7 Comments

Strahinja Ajvaz Over a year ago

i put your code in and i get the same issue as the one i state before.

HyeonJunOh Over a year ago

@StrahinjaAjvaz Would you please write down the action.js file that addPosts action creator is?

HyeonJunOh Over a year ago

And reducer.js that combineReducers is?

Strahinja Ajvaz Over a year ago

this is it here gist.github.com/strahinjaajvaz/51e0a82f7f26300f767d647cfe30625a

HyeonJunOh Over a year ago

@StrahinjaAjvaz To understand easily, change name of posts reducer or implement combineReducers like combineReducers({postStore: posts, cat}).

|

Stralos · Accepted Answer · 2017-10-13 07:42:55Z

1

So the problem is not the code, but your understanding of redux state and combine reducers.

what happens is that each reducer is responsible only for its own part of state, and only for it's own part of state.

You have 2 reducers, posts and cats. When you use combine reducers you are defining the state they are responsible for:

export default combineReducers({
  cats,
  posts
})

so now your redux store looks like this:

state: {
  cats: {},
  posts: {},
}

and each of these state properties have there own reducer, that manage that own state.

so in your case posts.posts is a valid redux state.

more information can be found here: http://redux.js.org/docs/recipes/reducers/UsingCombineReducers.html

if you want to see it your self in combine reducers change the code to be:

export default combineReducers({
  cats,
  postsStore: posts
})

and you will see it for your self.

edited Oct 13, 2017 at 7:42

answered Oct 13, 2017 at 7:27

Stralos

5,0955 gold badges27 silver badges40 bronze badges

5 Comments

Strahinja Ajvaz Over a year ago

still comes back with a nested posts unfortunately :(

Stralos Over a year ago

could you put the whole app inside git ? I could take a look. Because something doesn't seem right.

Stralos Over a year ago

Ok I figured it out.

Strahinja Ajvaz Over a year ago

what was the issue?

Strahinja Ajvaz Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

how to add an object to an array in store

2 Answers 2

7 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related