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

Issue

This Content is from Stack Overflow. Question asked by Tommeck37

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;
}

}



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?