[New feature] Stores

[jesusrodrz]

Description

Store are a data structure which contains a state and a easy API to update, read and subscribe to it.

Proposed core API:

const newUserModal = createStore<NewModalUser>({
  // Initial state is required
  initialState: { isOpen: false, user:{}, role:"USER"},
  // From allows to parse the data before set it to the state
  from: (data):NewModalUser => {
    // Do something with data
    return data
  }
})

// Method to update the store
newUserModal.update({ isOpen: true, user:{firstName: "John" } , role: "ADMIN")

// Method to read the store
newUserModal.read()

// Method to subscribe the store
newUserModal.subscribe((data)=>{
  // Do something with the data
})

// Method to set an error
newUserModal.error( new Error("Something bad happened"))

// Method to subscribe the store
newUserModal.subscribeError((error)=>{
  // Do something with the error
})

// Method to set the default state
newUserModal.setInitialState()

Proposed helpers API:

const openFormModal = createAction(formModalStore, (prevState)=>({...prevState, isOpen: true}))

const closeFormModal = createAction(formModalStore, (prevState)=>({...prevState, isOpen: false, form: {} }))

// With async actions 
const setLoadingPosts = createAction(featuredPosts, (prevState)=>({...prevState, isLoading: true }))

const fetchPosts = createAction(featuredPosts, async (prevState,page)=>{
  const posts = await apiClient.posts(page)
  return {isLoading: false, posts }
}, 
// It also accept a callback as a third param for sideEffect that should runs at the time of the action execution
// but are not directly related to the action itself
()=>{

 setLoadingPosts()
})

Proposed hooks API:

useStore works like the useState from React but it is shared

const formStore = createStore<FormType>({
  initialState:{}
})

function Component() {
  const [form,setForm] = useStore(formStore)

}

useSubscription Subscribe to the new data events and / or the error event

const formStore = createStore<FormType>({
  initialState:{}
})

function Component() {
  useSubscription(formStore,(data)=> { 
    // do something with the data
    },
    (error)=>{
     // do something with error
    }
  )
}

Real use cases and examples:

[alacret]

Questions:

1. What's the difference between a Store and an Event (current API) with a complex state?

Remember that the current event model was derived from the store approach in previous iterations of the state library. And there is a reason for that: Modeling errors like events allow us to keep them isolated from the rest of the logic. This means that, in the store approach, we have to couple data events with error events, the consequence of this is that no other component on the system can subscribe to errors events without subscribing also to data events.

2. Store API looks like the RXJS API, which we are also are coming from that.

[jesusrodrz]

@alcret
be aware that the issue isn't completed there is some things i need to add to be ready, and it is only a proposal i haven't start to coding anything.

Questions:

1. What's the difference between a Store and an Event (current API) with a complex state?

Remember that the current event model was derived from the store approach in previous iterations of the state library. And there is a reason for that: Modeling errors like events allow us to keep them isolated from the rest of the logic. This means that, in the store approach, we have to couple data events with error events, the consequence of this is that no other component on the system can subscribe to errors events without subscribing also to data events.

1. Store API looks like the RXJS API, which we are also are coming from that.

1. The store concept is more complex than event, allows to handle errors, a life cycle which can allows to fetch data or push data to the server. the store API doesn't restrict isolation of errors, nether the problem of having to subscribe to things that the component doesn't. The core API is powerful and simple, the hooks API is that need to optimized for those scenerios.
2. May looks similar to RXJS, but also the event API this is not a bad thing at all, the main reason is that all use the Observer pattern.