how to dispatch form value to store and then map over store to make ul list

how can I pass value from form into store and then display dynamically a list of those input items? I am trying to make a shopping list which would be passed via form and then displayed below in ul list below.

collectRefs() {
this.form = this.rootElement.querySelector("form");
this.shopList = this.rootElement.querySelector("#shop-list");   }




applyHandlers() {
    const store = createStore(rootReducers);
    store.subscribe(() => {
      this.shopList.innerText = `${store.getState().addProduct}`
      // {.map((value, index) => <li key={index}>{value}</li>)}
      console.log("stan przy subscribe " +store.getState().addProduct)
    });
      this.form.addEventListener('click', () => {
          store.dispatch(addProduct(this.form.value))
          console.log("to jest wynik " + `${store.getState().addProduct}`)
      });
  }

  createUI(rootElement) {
this.rootElement = rootElement;
this.rootElement.innerHTML = `
  <div class="card-header">Lista zakupów</div>
  <div class="card-body">
    <form>
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Produkt..." />
        <div class="input-group-append">
          <button class="btn btn-outline-primary" type="button" id="shop-add">Dodaj</button>
        </div>
      </div>
    </form>

    <ul class="list-group mt-3" id="shop-list">
    </ul>
  </div>
`;

}

REDUCER:

const initState = [];
function addProduct(state = initState, action) {
switch (action.type) {
    case ADD_PRODUCT:
        return [...state, action.payload]

    default:
        return state;
}

}