byte-fe / react-model

The next generation state management library for React
235 stars 22 forks source link

Local feature store #135

Open lishine opened 4 years ago

lishine commented 4 years ago

I have a:

  1. [x ] Question: Feel free to just state your question.πŸ˜„ Hi,

First of all, it is great great lib! After many others, I appreciate all the features here!

  1. I am thinking about a pattern for a store which is local to a set of components, lets call it feature. When a page with this feature renders the store should reseted or created. I have a thinking how to do it with a reset action being called at the root component of this feature. Or module variable being assigned to Model(store) in useEffect. The later can be made into custom hook. Maybe you see prettier option? Essentially the second option is similar to your pattern for component store. I can add documentation for this pattern.

Another documentation that I can add, is the neat feature - as an example if you push into array but in the component you use the first element, then the component won't be updated.

  1. [ x] Documentation improvement. Creating a PR if you canπŸ‘.

    • [ x] What problem would it solve for you? πŸ›
    • [x ] Do you think others will benefit from this change as well and it should in core package? πŸ’‘
    • [x ] Are you willing to (attempt) a PR yourself? βš”

Please tick the appropriate boxes. Feel free to remove the other sections.

Please be sure to close your issues promptly.

ArrayZoneYour commented 4 years ago

Thanks for you feedback!

I have only thought the pattern for the store which is public for all components or private for some components.

const Todo = {
  state: {
    items: ['Install react-model', 'Read github docs', 'Build App']
  },
  actions: {
    add: todo => {
      return state => {
        state.items.push(todo)
      }
    }
  }
}

Pattern 1

const { useStore } = Model({ Todo })

This usage expose the store for all components, you can visit or update it by

const [state, actions] = useStore('Todo')

Pattern 2

export const { useStore } = Model(Todo)

you can also update the component which import the useStore ( local for a component group )

It becomes a modular variable if you use it inside useEffect scope because other components cannot get the useStore and the anonymous name of the store

Can you show your example or PR in more detail? to be honest, I am not very clear about the feature concept you mentioned above.