How to use the frontity.connect function in frontity

@media (min-width: 700px) {
    font-size: 2.4rem;
    padding: 2.5rem 0;
  }

  &:hover,
  &:focus {
    text-decoration: underline;
  }
  /* styles for active link */
  &[aria-current="page"] {
    text-decoration: underline;
  }
`;

export default connect(MobileMenuModal);

const cleanTitle = postTitle.replace(/<\/?[^>]+(>|$)/g, "");
    // 3. Render the proper title.
    title = `${cleanTitle} - ${state.frontity.title}`;
  } else if (data.is404) {
    // Add titles to 404's.
    title = `404 Not Found - ${state.frontity.title}`;
  }

  return (
    
      <title>{title}</title>
    
  );
};

export default connect(Title);

beforeCSR: ({ state }) => {
        console.log("beforeCSR");
      },
      afterCSR: ({ state }) => {
        console.log("afterCSR");
      },
      action1: ({ state }) => {
        state.extension1.prop1 = 2;
      },
      action2: ({ state }) => num => {
        state.extension1.prop1 = num;
      }
    }
  },
  roots: {
    extension1: connect(Extension1)
  },
  fills: {
    extension1: () =&gt; <div>I am a fill of extension example 1</div>
  },
  libraries: {
    comments: {
      Comment: () =&gt; <div>I am a comment from extension example 1!</div>
    }
  }
};

export default ExtensionExample1;

{isTherePreviousPage && (
          
            
          
        )}
      
      
    
  );
};

/**
 * Connect Pagination to global context to give it access to
 * `state`, `actions`, `libraries` via props
 */
export default connect(Pagination);

const Text = styled.em`
  display: inline-block;
  margin-top: 16px;
`;

const Container = styled.div`
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: calc(100% - 8rem);
  margin-left: auto;
  margin-right: auto;
`;

name="search"
            />
            Search
          

          
            Close search
            
          
        
      
    
  );
};

export default connect(SearchModal);

const ModalOverlay = styled.div`
  background: rgba(0, 0, 0, 0.2);
  display: none;
  opacity: 0;
  position: fixed;
  bottom: 0;
  left: -9999rem;
  top: 0;
  transition: opacity 0.2s linear, left 0s 0.2s linear;
  width: 100%;
  z-index: 999;

  &[data-open="true"] {
    display: block;
    opacity: 1;

return (
    
      Categories

      
        {postCategories.map(category => (
          
            {category.name}
          
        ))}
      
    
  );
};

export default connect(PostCategories);

const EntryCategories = styled.div`
  line-height: 1.25;
  margin-bottom: 2rem;

  @media (min-width: 700px) {
    margin-bottom: 3rem;
  }
`;

const EntryCategoriesInner = styled.div`
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem 0 0 -1rem;

return (
    <>
      
        <title>{state.frontity.title}</title>
        
      
      
      
        <header>
      
      {Content}
    
  );
};

export default connect(Theme);

const HeadContainer = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #1f38c5;
`;

const Body = styled.div`
  display: flex;
  justify-content: center;
  background-image: linear-gradient(
    180deg,
    rgba(66, 174, 228, 0.1),
    rgba(66, 174, 228, 0)
  );</header>

)}
        
      

      {isEmpty ? (
        
          
        
      ) : (
        
      )}
    
  );
};

export default connect(SearchResults);

const IntroText = styled(SectionContainer)`
  width: 100%;
  margin-top: 2rem;
  font-weight: initial;

  @media (min-width: 700px) {
    font-size: 2rem;
    margin-top: 2.5rem;
  }
`;

const Text = styled.p`
  margin: 0 0 1em 0;
  &:last-child {
    margin-bottom: 0;

const { lang } = state.frontity.lang;
    const articleDate = new Date(date);

    const rtf = new Intl.RelativeTimeFormat( lang, { style: 'short' })
    const diff = diffFromNow(date)
    const timeago = diff > -24
      ? rtf.format(diff, 'hours')
      : rtf.format(Math.floor(diff / 24), 'days')

    return (
        <time datetime="{" pubdate="true">{timeago}</time>
    )
}

export default connect(Timeago);

{data.isPost && (
        
          
          {(state.yoast.facebook.image || state.yoast.image) && (
            
          )}
        
      )}
    
  );
};

export default connect(Facebook);