title: Reducer for async action is adding the response into an object with the same key name as the reducer
body: <p>I am creating an async action in Redux with Redux-Thunk and while the action works and returns the data, when it is added to the state it is put inside an object with the same name as the reducer, like so...</p>
  
  <p><a href="https://i.stack.imgur.com/3XOYV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3XOYV.png" alt="duplicate key name"></a></p>
  
  <p>The posts key should just have the array of items but it is instead an object with a posts key. What could be causing this issue? Here is the code for the async action...</p>
  
  <pre><code>export function getApiData() {
      return dispatch =&gt; {
          fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response =&gt; response.json())
            .then(json =&gt; dispatch(
              {
                  type: ActionTypes.GET_API_DATA,
                  payload: json
              }
          ))
      }
  }
  </code></pre>
  
  <p>Here is the code for the reducer...</p>
  
  <pre><code>function posts(state = [], action) {
      switch (action.type) {
  
          case ActionTypes.GET_API_DATA:
              return {
                  ...state,
                  posts: action.payload,
              }
          default:
              return state
      }
  }
  </code></pre>
  
  <p>The other keys like user and prizes (which are not async actions) work perfectly fine and the new data is added as expected to them. What is leading to this behavior when it comes to the posts key and the async action?</p>
  
  <p>Thanks in advance.</p>