<head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.js"
  integrity="sha512-hIeMcj07bbpdm6W49lxdLrW7D1eLJF54UP0dQ7Ts3mPqa/Zjc51zI7l1A+QlHhijEluigbBfwLM9YkkLmtkb0A=="
  crossorigin="anonymous"></script>
</head>
<body>
  <style>
    .wrap {
      border: 5px solid black;
      padding: 10px;
    }
  </style>

  <div id="red"></div>
  <div id="blue"></div>
  <script>
    function reducer(state, action){
      //state가 정의되지 않은, 최초의 초기화 단계
      if(state === undefined){
        return {color:"yellow"}
      }
     
      if( action.type === 'CHANGE_COLOR') {
        return Object.assign({...state}, {color:action.color})
      }
 
    }
    var store = Redux.createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    );
    console.log(store.getState())

    function red() {
      var state = store.getState();
      document.querySelector("#red").innerHTML = `
          <div class="wrap" id="component_red" style="background-color:${state.color}">
          <h1>red</h1>
          <input type="button" value="click" onclick="
            store.dispatch({type:'CHANGE_COLOR', color:'red'})">
          </div>
        `;
    }
    //store가 바뀔떄마다 reㅇ 함수 호출
    store.subscribe(red);
    red();

    function blue() {
        var state = store.getState();
        document.querySelector("#blue").innerHTML = `
      <div class="wrap" id="component_blue" style="background-color:${state.color}">
      <h1>blue</h1>
      <input type="button" value="click" onclick="
        store.dispatch({type:'CHANGE_COLOR', color:'blue'})">
      </div>
    `;
      }
      //store가 바뀔떄마다 reㅇ 함수 호출
      store.subscribe(blue);
      blue();

  </script>
</body>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.