Using RE:DOM framework with redom-state addon

If you are not familiar with RE:DOM framework here you should look first. You should get to know especially how RE:DOM components updates their state. It's not the same as in bigger reactive frameworks. An update is done manually through update method of each component. There are also no partial updates. Each update starts in the root of the application and flows to the leaves unless you decide that some part of the view should not be updated adding special logic in update function.

redom-state component is not changing this approach. It does not extend the framework but builds on top of and what it provides is simple loop feedback between DOM event in RE:DOM component and root application update function call.

The state is updating mostly like reducer in react hooks. It's a simple function that gets payload and merges it with the whole state:

import { wire } from "redom-state"

export const addJob((state, jobPayload) => {
  return {
     ...state,
     jobs: [...state.jobs, jobPayload]
  }
})

Each update call returns a whole new state and each update calls the update function in the application's root.

That's why you can be sure that in the following RE:DOM component each button click will increment counter value:

import { el, text } from "redom"
import { wire } from "redom-state"

export const increment = wire((state) => ({ ...state, counter: state.counter + 1 }));

export default class Counter {
  constructor() {
    this.el = el('.counter',
      this.counter = text(),
      this.button = el('button', text('increment'))
    );
    this.button.onclick = increment;
  }
  
  update(state) {
    this.counter.textContent = state.counter;
  }
}

You can encapsulate view components and data manipulating functions in logic components what makes the code cleaner. For example, if the component above would be a part of a bigger app I would be able to include RE:DOM component and state functions as well.

import Counter, { increment } from "./Counter"

If you will want to try redom-state just install it using your favorite package manager:

yarn add redom-state
# or
npm i redom-state

You can feel free also to fork and update, just let me know if you figure out something nice.

Using RE:DOM framework with redom-state addon

Subscribe to new posts.