alonbardavid

function App(){
  return <PostsContext.Provider>
          <NotificationsContext.Provider>
            <AuthenticationContext.Provider>
              ... ad nauseum 
            </AuthenticationContext.Provider>
          </NotificationsContext.Provider>
        </PostsContext.Provider>      
}

alonbardavid

class Form {
 @observable
 email = ""
 @observable
 password = ""
 
 @computed
 get emailError(){
   if (this.email && this.email.length >0 &&
       this.email.indexOf("@") >= 0){

alonbardavid

const ResourceContext = React.createContext();
function useResource(){
  const [resource,setResource] = React.useState({});
  return {
    resource,
    requestResource(){
      const interval = setInterval(()=>({
        // this is a contrived example for brevity, I know it's not
        // how you'll do it and that it won't work since resource is
        // always the original value

alonbardavid

// resource-view.js

const resourceById = createSelector([
    (state,props)=>state.resources[props.resourceId]
],(resource)=>resource)
const mapStateToProps = (state,ownProps) => ({
    ...resourceById(state,ownProps)
})

alonbardavid

//resource-view.js
function ResourceView(props) {
  const {loading,resource,error} = props;
  return loading? <loader/>:<ResourceItem resource={resource}/>
}

const mapStateToProps = (state,ownProps) => ({
    ...state.resources[ownProps.resourceId]
})
export default connect(mapStateToProps)(ResourceView)

alonbardavid

  function App(){
    return <PostsContext.Provider>
            <NotificationsContext.Provider>
              <AuthenticationContext.Provider>
                ... ad nauseum 
              </AuthenticationContext.Provider>
            </NotificationsContext.Provider>
          </PostsContext.Provider>      
  }

alonbardavid

const ResourceContext = React.createContext();
function useResource(){
  const [resource,setResource] = React.useState({});
  return {
    resource,
    requestResource(){
      setResource({loading:true});
      return fetch(`url/resource/${resourceId}`)
        .then(response=>response.json())
        .then(json=>setResource({loading:false,resource:json}))

alonbardavid

//resource-view.js
function ResourceView(props) {
  const {loading,resource,error} = props;
  return loading? <loader/>:<ResourceItem resource={resource}/>
}

const mapStateToProps = (state,ownProps) => ({
    ...state.resources[ownProps.resourceId]
})
export default connect(mapStateToProps)(ResourceView)

alonbardavid

class ResourceStore {
  @observable
  resources = {};
 
  @action("REQUEST_RESOURCE")
  requestResource(id) {
    this.resources[id] = {loading:true};
    return fetch(`url/resource/${id}`)
        .then(response=>response.json())
        .then(action("REQUEST_RESOURCE_SUCCESS",

alonbardavid

// in actions.js
// these are action creators
export const  requestResource= (resourceId)=>({
  type: 'REQUEST_RESOURCE',
  resourceId
})
export const requestResourceSuccess = (resourceId,payload)=>({
  type: 'REQUEST_RESOURCE_SUCCESS',
  resourceId,
  payload