// action
export const userLoggedIn = (user) => ({
	type: USER_LOOGGED_IN,
	user
});



export const signUp =(user)=>(dispatch)=>{
    api.user.signUp(user).then(user=>{
        localStorage.bookworm=user.token;
        dispatch(userLoggedIn(user));
    })
}

//reducer
import { USER_LOOGGED_IN, USER_LOOGGED_OUT } from '../types';

export default function user(state = {}, action = {}) {
	switch (action.type) {
		case USER_LOOGGED_IN:
			return action.user;
		case USER_LOOGGED_OUT:
			return {};
		default:
			return state;
	}
}


//store 层
//对于store 储存仓来说 ，RootReducer 是传入给store 新数据 ， applyMiddleware（thunk） 为了
//是拦截异步的 action 行为，虽然
//此处的demo 中action 虽为同步事件，但比方说 :
//dispatch(()=>{api.user.signUpAgain}).then((data)=>{dispatch(action)})
//这样我们就可以在一个数据流中组合多个异步的 action 事件了
const store = createStore(RootReducer, composeWithDevTools(applyMiddleware(thunk)));

     import ... from ... //图片imgx
     import TWEEN from '@tweenjs/tween.js'
     class PlayAnimation from Component{
     constructor(props){
         this.bgImgs = [img0, img1, img2, img3, img4, img5, img6, img7, img8, img9, img10, img11, img12, img13, img14, img15, img16, img17, img20, img22, img23, img24, img25, img26, img27, img28, img29, img30, img31, img32, img33, img34, img35, img36, img37, img38, img39];
         this.state={
            imgBgSrc:imgg39;
         }
     }
    
    componentDidMount()=>{
        this.preloadImg(this.bgImgs).then(()=>{
            //播放连帧动画
            this.loopImgBg();
        }).catch(()=>{
        // 加载失败的应变图
            this.setState({img39})
        })
    }
    
    preloadImg=(imgs)=>{
        return Promise.all(imgs.map(src=>{
            return new Promise((resolve,reject)=>{
                var img=new Image();
                img.src=src;
                img.onload=resolve;
                img.onerror=reject;
            })
        }))
    }
    
    loopImgBg=()=>{
        const that=this
        const imgLength=this.bgImgs.length;
        this.tween=new TWEEN.Tween({x:0})
            .to({x:imgLength*10 -1},2000)
            .easing(TWEEN.Easing.Linear.None)
            .onUpdate(coords=>{
                const {x}=coords
                const loopIndex =Math.floor(x/10;
                const imgBgSrc= that.bgImgs[loopIndex];
                this.setState({imgBgSrc}),
            })
            .start();
    }
    
    render(){
        const {imgBgSrc}=this.state
        return (
            <div>
                <img src={imgBgSrc} alt="Loading ..."></img>
            </div>
        )
    }
}
export default PlayAnimation;