title: React + Redux : reducer won't reload component
body: <p>I wrote a generic Table component, instancied twice with two differents datasets. I use a Redux store to hydrate props and I try to delete a row when I click on it.</p>
  
  <p>Components are well displayed and onClick function is fired and reducer is called. The new returned state returns the previous state without the element clicked.</p>
  
  <p>My problem is that the components are not re-rendered.
  According to the troubleshouting page (<a href="http://redux.js.org/docs/Troubleshooting.html" rel="nofollow noreferrer">http://redux.js.org/docs/Troubleshooting.html</a>), it seems that I don't mutate the previous state (maybe I just don't understand how to do), I'm calling the dispatch() function and my mapStateToProps seems to be right as datas are well displayed on the page load.</p>
  
  <p>I tried to define initial state in reducer.js > table function instead of doing it with createStore function, I tried to split 'tables' reducer into 'domains' and 'hosts' reducers (duplicate code), I tried to not use combineReducers() as I have only one (but I will have more in the future), and I tried so many things so I can't remember.</p>
  
  <p>I bet it's not a big deal but I just not able to figure out what's going on. Can you help me please ? Thank you very much.</p>
  
  <hr>
  
  <p>reducer.js</p>
  
  <pre><code>import { combineReducers } from 'redux'
  import { DELETE_DOMAIN, DELETE_HOST } from './actions'
  
  function deleteItem(state, index) {
      let newState = Object.assign({}, state)
  
      newState.items.splice(index, 1)
  
      return newState
  }
  
  function tables(state = {}, action) {
      switch (action.type) {
          case DELETE_HOST:
              return Object.assign({}, state, {
                  hosts: deleteItem(state.hosts, action.host)
              })
  
          case DELETE_DOMAIN:
              return Object.assign({}, state, {
                  domains: deleteItem(state.domains, action.domain)
              })
  
          default:
              return state
      }
  }
  
  const reducers = combineReducers({
      tables,
  })
  
  export default reducers
  </code></pre>
  
  <p>actions.js</p>
  
  <pre><code>export const DELETE_DOMAIN = 'DELETE_DOMAIN'
  export const DELETE_HOST = 'DELETE_HOST'
  
  export function deleteDomain(domain) {
      return { type: DELETE_DOMAIN, domain }
  }
  
  export function deleteHost(host) {
      return { type: DELETE_HOST, host }
  }
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './app';
  import { Provider } from 'react-redux'
  import { createStore } from 'redux'
  import reducers from './reducers'
  
  const initialState = {
      tables: {
          domains: {
              headers: {
                  id: 'Id',
                  domain: 'Domain',
                  host: 'Hoster',
              },
              items: [
                  {
                      id: 1,
                      domain: 'dev.example.com',
                      host: 'dev',
                  },
                  {
                      id: 2,
                      domain: 'prod.example.com',
                      host: 'prod',
                  }
              ]
          },
          hosts: {
              headers: {
                  id: 'Id',
                  label: 'Label',
                  type: 'Type',
                  hoster: 'Corporation',
              },
              items: [
                  {
                      id: 1,
                      label: 'Server 1',
                      type: 'Server type',
                      hoster: 'Gandi',
                  },
                  {
                      id: 2,
                      label: 'Server 2',
                      type: 'Server type',
                      hoster: 'OVH',
                  }
              ]
          }
      }
  }
  
  let store = createStore(reducers, initialState)
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;,
      document.getElementById('root')
  );
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>import React from 'react';
  import Domains from './modules/domains.js';
  import Hosts from './modules/hosts.js';
  import Nav from './modules/nav.js';
  import {
    BrowserRouter as Router,
    Route,
  } from 'react-router-dom'
  
  export default class App extends React.Component {
      render() {
          return (
              &lt;Router&gt;
                  &lt;div className="container-fluid col-md-6"&gt;
                      &lt;Nav /&gt;
                      &lt;Route path="/domains" component={Domains}/&gt;
                      &lt;Route path="/hosts" component={Hosts}/&gt;
                  &lt;/div&gt;
              &lt;/Router&gt;
          );
      }
  }
  </code></pre>
  
  <p>domain.js</p>
  
  <pre><code>import React from 'react';
  import Table from './../components/table.js';
  import { connect } from 'react-redux'
  import { deleteDomain } from './../actions'
  
  const mapStateToProps = (state) =&gt; {
      return state.tables.domains
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
              onRowClick: (id) =&gt; {
                  dispatch(deleteDomain(id))
              }
          }
  }
  
  class DomainsView extends React.Component {
      render() {
          return (
              &lt;Table headers={this.props.headers} items={this.props.items} onRowClick={this.props.onRowClick} /&gt;
          )
      }
  }
  
  const Domains = connect(
      mapStateToProps,
      mapDispatchToProps,
  )(DomainsView)
  
  export default Domains
  </code></pre>
  
  <p>hosts.js
  Same as domains.js with differents const / class names and props</p>