demo/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>@veams/rx-store demo</title>
  </head>
  <body>

  <div id="app">No data yet!
  </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.4/rxjs.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
    <script src="../lib-umd/index.js"></script>
    <script>
      let count = 0;
      const el = document.getElementById('app');
      const reduxStore = Redux.createStore(
        Redux.combineReducers({
          ui: (state = {}, action) => {
            switch (action.type) {
              default:
                return state;
            }
          },
          person: (state = {}, action) => {
            switch (action.type) {
              case 'person:add':
                return {
                  ...state,
                  entities: {
                    ...state.entities,
                    ...action.payload,
                  },
                };
              default:
                return state;
            }
          },
        }),
        {
          ui: {},
          person: {
            status: 'fetched',
            entities: {},
          },
        }
      );
      const store = RxStore.createObservableFromRedux({
        store: reduxStore,
      });

      const females$ = store
        .select(state => state.person.entities)
        .pipe(
          rxjs.operators.map(items => {
            return Object.values(items).filter(person => person.gender === 'female');
          })
        )
        .subscribe(females => {
          count += 1;
          console.log('count: ', count);
          el.innerHTML = `<pre>${JSON.stringify(females, null, 4)}</pre>`; // Prints [{name: "Adriana", gender: "female"}] and upcoming changes to the person slice
        });

      // Later on we want to unsubscribe
      setTimeout(() => {
        females$.unsubscribe();
      }, 5000);

      // DISPATCH ACTIONS
      setTimeout(() => {
        store.dispatch({
          type: 'person:add',
          payload: {
            1: {
              name: 'John',
              gender: 'male',
            },
            2: {
              name: 'Max',
              gender: 'male',
            },
            3: {
              name: 'Adriana',
              gender: 'female',
            },
          },
        });
      }, 1000);

      setTimeout(() => {
        store.dispatch({
          type: 'person:add',
          payload: {
            4: {
              name: 'Andrea',
              gender: 'female',
            },
          },
        });
      }, 2000);

      setTimeout(() => {
        store.dispatch({
          type: 'person:add',
          payload: {
            4: {
              name: 'Andreas',
              gender: 'male',
            },
          },
        });
      }, 3000);

      setTimeout(() => {
        store.dispatch({
          type: 'person:add',
          payload: {
            5: {
              name: 'Maxime',
              gender: 'female',
            },
          },
        });
      }, 4000);

      setTimeout(() => {
        store.dispatch({
          type: 'person:add',
          payload: {
            5: {
              name: 'Maxime',
              gender: 'female',
            },
          },
        });
      }, 4500);

      setTimeout(() => {
        store.dispatch({
          type: 'person:add',
          payload: {
            6: {
              name: 'Sylvia',
              gender: 'female',
            },
          },
        });
      }, 6000);
    </script>
  </body>
</html>