title: Redux.js , Webpack.js , index.html - my redux render function doesn't update the index.html DOM
body: <p>I'm working currently on webpack. For a reason that I don't understand, my redux functions doesn't upload the DOM. 
  However, the Google console returns the good results of my functions. </p>
  
  <p>Everything seems good, but there is something in the code that create this bugg : my DOM don't render the li of my redux render function.</p>
  
  <p>So, I have check the Webpack config and the index.html data flow, everything seems great. What I have missing if any ?</p>
  
  <p>here my webpack.config.js : </p>
  
  <pre><code>const webpack = require("webpack");
  const path = require("path");
  module.exports= {
    mode: "development",
      entry : "./src/index.js",
      output: {
        path : path.resolve(__dirname, 'dist'),
         publicPath: 'dist',
          filename : "main.js"
      },
      plugins: [
        new webpack.HotModuleReplacementPlugin()
      ],
      //Loaders   tell    webpack what    to  do  with    the entry   file
      module:{
          rules: [{
              test: /.(js|jsx)$/,
              loader: "babel-loader",
              exclude : /node_modules/
          }]
  
      },
      devServer :{
        publicPath: "/",
        contentBase: path.join(__dirname, "dist"),
        hot: true
      }
  }
  </code></pre>
  
  <p>here my index.js : </p>
  
  <pre><code>import {
    createPost,
    editPost,
    setFilter
  } from './actions';
  import {
    appReducer
  } from "./reducers.js";
  import {
    createStore
  } from "redux";
  
  let store = createStore(appReducer)
  const unsubscribe = store.subscribe(() =&gt; {
    console.log("state: ", store.getState())
  })
  store.dispatch(createPost("Brian", "Hello world =D !"));
  
  const root = document.getElementById('root');
  const render = () =&gt; {
  root.innerHTML = ''
  const { posts } = store.getState()
  posts.forEach((post, index) =&gt; {
  const item = document.createElement('li')
  item.addEventListener('click', () =&gt;
  store.dispatch(editPost(index, post.text + '!'))
  )
  const text = document.createTextNode(post.user + ' - ' + post.text)
  item.appendChild(text)
  root.appendChild(item)
  
  })
    const stopRender = store.subscribe(render)
  }
  
  
  store.dispatch(createPost("user1", "text1"))
  store.dispatch(createPost("user2", "text2"))
  </code></pre>
  
  <p>here my reducer.js : </p>
  
  <pre><code>import {
    CREATE_POST,
    EDIT_POST,
    SET_FILTER
  } from "./actionTypes";
  import {combineReducers} from "redux";
  export function postsReducer(state = [], action) {
    switch (action.type) {
  
      case CREATE_POST:
        {
          const {
            type,
            ...post
          } = action
  
          return [...state, post]
        }
  
      case EDIT_POST:
        {
          const {
            type,
            id,
            ...newPost
          } = action
          return state.map((oldPost, index) =&gt;
            action.id === index ? { ...oldPost,
              ...newPost
            } : oldPost)
  
        }
  
      default:
        return state
    }
  
  
  }
  
  export function filterReducer(state = "all", action) {
    if (action.type === SET_FILTER) {
      return action.filter
    } else {
      return state
    }
  
  }
  
  export const appReducer = combineReducers({
  post : postsReducer,
  filter : filterReducer
  })
  </code></pre>
  
  <p>here my index.html :</p>
  
  <pre><code>&lt;!DOCTYPE   html&gt;
  &lt;html&gt;
          &lt;head&gt;
                  &lt;meta   charset="utf-8"&gt;
                  &lt;title&gt;Learning Redux&lt;/title&gt;
  
          &lt;/head&gt;
          &lt;body&gt;
                  &lt;div id="root"&gt;&lt;/div&gt;
                  &lt;script src="main.js"&gt;&lt;/script&gt;
  
          &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks</p>