title: UI is not updating react & redux
body: <p>I'm beginner in react and redux, I have action which posts JSON on API and then receives list, this action called from button click, this all process works good but after populating data ui is not updating  </p>
  
  <p>Action:</p>
  
  <pre><code>import * as types from './actionTypes'
  import { postMessage } from '../api/messaging'
  
  function postToAPI(msg, dispatch) {
    dispatch({ type: types.MESSAGE_POSTING });
  
    postMessage(msg, (messages) =&gt; {
      dispatch({
        type: types.MESSAGE_POST_DONE,
        messages: messages
      });
    });
  }
  
  export function postMessageAction(msg) {
    return (dispatch) =&gt; {
      postToAPI(msg, dispatch);
    }
  }
  </code></pre>
  
  <p>Reducer:</p>
  
  <pre><code>import * as types from '../actions/actionTypes'
  
  const initialState = {
    messages: []
  }
  
  export default function messages(state = initialState, action) {
    switch(action.type) {
      case types.MESSAGE_POST_DONE:
        return {
          ...state,
          messages: action.messages
        }
        this.forceUpdate();
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>Main container:</p>
  
  <pre><code>export default class App extends Component {
    render() {
      return (
        &lt;Provider store={store}&gt;
          &lt;CounterApp /&gt;
        &lt;/Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p>CounterApp:</p>
  
  <pre><code>class CounterApp extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      const { state, actions } = this.props;
      return (
        &lt;Messaging /&gt;
      );
    }
  }
  
  export default connect(state =&gt; ({
    messages: state.default.messages.messages
  }))(CounterApp);
  </code></pre>
  
  <p>Messaging:</p>
  
  <pre><code>class Messaging extends Component {
    render() {
      return (
        &lt;View&gt;
          &lt;MessageList messages={this.props.messages} /&gt;
          &lt;Message /&gt;
        &lt;/View&gt;
      )
    }
  }
  export default connect(state =&gt; ({
    messages: state.default.messages.messages
  }))(Messaging);
  </code></pre>
  
  <p>Message list:</p>
  
  <pre><code>export default class MessageList extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;ScrollView&gt;
          {
            this.props.messages.map((item, index) =&gt; {
              return (
                &lt;Text&gt;
                  { item.body }
                &lt;/Text&gt;
                )
            })
          }
        &lt;/ScrollView&gt;
      )
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/veEOy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/veEOy.png" alt="enter image description here"></a></p>
  
  <p>My MessageList component does not updates when messages changed. I read difference between props and state but i dont know how to pass data to state.</p>
  
  <h2>Update:</h2>
  
  <p>My state in messaging connect looks like this why i used default</p>
  
  <p><a href="https://i.stack.imgur.com/y7hy0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y7hy0.png" alt="enter image description here"></a></p>
  
  <p>Any ideas?</p>