How to use the san-store.connect.san function in san-store
To help you get started, we’ve selected a few san-store examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
baidu / san-store / test / connect.san.spec.js View on Github 
it('component data should be update when store data change, function mapStates item', done => {
store.addAction('for-connect-2', payload => {
let builder = updateBuilder()
.set('name', payload.name)
.set('emails[0]', payload.email);
return builder;
});
let MyComponent = connect.san({
name: 'name',
email: state => {
return state.emails[0];
}
})(
san.defineComponent({
template: '<u title="{{name}}-{{email}}">{{name}}-{{email}}</u>'
})
);
let myComponent = new MyComponent();
let wrap = document.createElement('div');
document.body.appendChild(wrap);
myComponent.attach(wrap);
let u = wrap.getElementsByTagName('u')[0];import san from 'san';
import { router } from 'san-router';
import {default as format} from "date-fns/format";
import { connect } from 'san-store';
import { Types as ActionTypes } from '../action';
import { Types as ProfileActionTypes } from '../../profile/action';
export default connect.san(
{
profile: 'profile',
user: 'user',
isAuthenticated: 'isAuthenticated'
},
{
removeArticle: ActionTypes.REMOVE,
removeFav: ActionTypes.REMOVE_FAVORITE,
addFav: ActionTypes.ADD_FAVORITE,
setAuthor: ActionTypes.SET_AUTHOR,
unfollow: ProfileActionTypes.UNFOLLOW,
follow: ProfileActionTypes.FOLLOW
}
)(san.defineComponent({
filters: {
date(source) {import san from 'san';
import { router } from 'san-router';
import { connect } from 'san-store';
import { Types } from './action';
import ErrorsView from '../common/components/errors';
export default connect.san(
{},
{ login: Types.LOGIN }
)(san.defineComponent({
components: {
'x-errors': ErrorsView
},
template: `
<div class="auth-page">
<div class="container page">
<div class="row">
<div class="col-md-6 offset-md-3 col-xs-12">
<h1 class="text-xs-center">Sign in</h1>
<p class="text-xs-center">
<a href="#/register">Need an account?</a>
</p></div></div></div></div>import san from 'san';
import { connect } from 'san-store';
import { Types as ActionTypes } from '../action';
export default connect.san(
{},
{
unfollow: ActionTypes.UNFOLLOW,
follow: ActionTypes.FOLLOW
}
)(san.defineComponent({
template: `
<div class="user-info">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-10 offset-md-1">
<img class="user-img" src="{{ profile.image }}">
<h4>{{ profile.username }}</h4>
<p>{{ profile.bio }}</p>
<div>
<a href="#/settings" class="btn btn-sm btn-outline-secondary action-btn"></a></div></div></div></div></div>import san from 'san';
import { connect } from 'san-store';
import { Link } from 'san-router';
import { Types as ActionTypes } from './action';
import ArticleList from './components/list';
export default connect.san(
{
tags: 'tags',
isAuthenticated: 'isAuthenticated'
},
{
tags: ActionTypes.TAGS
}
)(san.defineComponent({
components: {
'x-list': ArticleList,
'x-link': Link
},
template: `
<div class="home-page">
</div>import san from 'san';
import { router } from 'san-router';
import { connect } from 'san-store';
import { Types } from './action';
import ErrorsView from '../common/components/errors';
export default connect.san(
{
isAuthenticated: 'isAuthenticated',
user: 'user'
},
{
register: Types.REGISTER
}
)(san.defineComponent({
components: {
'x-errors': ErrorsView
},
template: `
<div class="auth-page">
<div class="container page">
<div class="row"></div></div></div>import san from 'san';
import { connect } from 'san-store';
import { Types as ActionTypes } from './action';
import UserInfo from './components/user-info';
import Nav from './components/nav';
import ArticleList from '../article/components/list';
export default connect.san(
{
profile: 'profile',
user: 'user'
},
{
fetch: ActionTypes.FETCH,
reset: ActionTypes.RESET
}
)(san.defineComponent({
components: {
'x-articles': ArticleList,
'x-userinfo': UserInfo,
'x-nav': Nav
},import san from 'san';
import { connect } from 'san-store';
import ArticleMeta from './meta';
import { Types as ActionTypes } from '../action';
export default connect.san(
{
articles: 'articles',
pageCount: 'articlePageCount',
loading: 'articlesLoading'
},
{
fetch: ActionTypes.FETCH
}
)(san.defineComponent({
components: {
'x-meta': ArticleMeta
},
template: `
<div>
<div class="article-preview">Loading articles...</div></div>import san from 'san';
import { router } from 'san-router';
import { connect } from 'san-store';
import { Types } from './action';
import ErrorsView from '../common/components/errors';
export default connect.san(
{
isAuthenticated: 'isAuthenticated',
user: 'user'
},
{
logout: Types.PURGE_AUTH,
updateUser: Types.UPDATE
}
)(san.defineComponent({
components: {
'x-errors': ErrorsView
},
template: `
<div class="settings-page">
<div class="container page"></div></div>import san from 'san';
import { router } from 'san-router';
import { connect } from 'san-store';
import { Types as ActionTypes } from './action';
import ErrorsView from '../common/components/errors';
export default connect.san(
{
article: 'article',
isAuthenticated: 'isAuthenticated'
},
{
reset: ActionTypes.RESET,
add: ActionTypes.ADD,
edit: ActionTypes.EDIT,
get: ActionTypes.GET,
addTag: ActionTypes.ADD_TAG,
removeTag: ActionTypes.REMOVE_TAG
}
)(san.defineComponent({
components: {
'x-errors': ErrorsView
},
