article: the best shared state pattern with remini

[betula]

The central part of any complex application is stateful logic. Application has a state and a logic that uses and modifies the state.

For example, according to Redux architecture the one state, and logic inside sagas, thunks, reducers, or action creators.

Remini proposal (suppose) pattern combined great ideas from Redux, Vue, and Angular. In depends on your internal particularities, you can choose one of the supposed implementations. The first one will be better for Redux-familiar developers.

When the center of our stateful logic is the Store.

const User = () => {
  $state = box(initialState);

  const login = () => {
    update($state, state => { ...state, loggedIn: true });
  }

  const logout = () => {
    update($state, state => { ...state, loggedIn: false });
  }

  return Object.assign($state, {
    login,
    logout
  });
}

And the second one is the "flat style". All modules should be reactive transparently, looks like simple usual objects.

const User = () => {
  $name = box('Amelia');
  $loggedIn = box(false);

  const login = () => {
    put($loggedIn, true);
  }

  const logout = () => {
    put($loggedIn, false);
  }

  return {
    get name() {
      return val($name);
    },
    get logginIn() {
      return val($logginIn);
    },

    login,
    logout
  });
}