p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.
p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.
p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.
p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.
p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.
p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.
p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.
p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.
p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.
// createEpicMiddleware.ts Line 86returnnext=>{returnaction=>{constresult=next(action);stateSubject$.next(store.getState());actionSubject$.next(action);returnresult;};};
// createEpicMiddleware.ts Line 53constactionSubject$=newSubject<T>();conststateSubject$=newSubject<S>();constaction$=actionSubject$.asObservable().pipe(observeOn(uniqueQueueScheduler));conststate$=newStateObservable(stateSubject$.pipe(observeOn(uniqueQueueScheduler)),store.getState());
constepic$=newSubject<Epic<T,O,S,D>>();// ...// createEpicMiddleware.ts Line 63constresult$=epic$.pipe(map(epic=>{constoutput$=epic(action$,state$,options.dependencies!);if(!output$){thrownewTypeError(`Your root Epic "${epic.name||'<anonymous>'}" does not return a stream. Double check you\'re not missing a return statement!`);}returnoutput$;}),mergeMap(output$=>from(output$).pipe(subscribeOn(uniqueQueueScheduler),observeOn(uniqueQueueScheduler))));result$.subscribe(store.dispatch);
epic\$はepicが注入されることを期待しているSubjectです。epicMiddleware.run(rootEpic)を動かした時にrootEpicを受け取る部分です。
epic\$.pipe()は２つのオペレーターを含んでいます。
１つ目のmapはシンプルにepicを実行して返り値を返しています。返り値が不正の場合はエラーを出力します。
2つ目のmergeMapでhigh order Observableとしてepicの返却値であるoutput$がmergeされています。
// createEpicMiddleware.ts Line 103epicMiddleware.run=rootEpic=>{if(process.env.NODE_ENV!=='production'&&!store){warn('epicMiddleware.run(rootEpic) called before the middleware has been setup by redux. Provide the epicMiddleware instance to createStore() first.');}epic$.next(rootEpic);};
functioncreateCtx<ContextType>(){constctx=React.createContext<ContextType|undefined>(undefined);functionuseCtx(){constc=React.useContext(ctx);if(!c)thrownewError("useCtx must be inside a Provider with a value");returnc;}return[useCtx,ctx.Provider]asconst;}
typeUser={id:string;name:string;};typeauthContextType={user:User|null;signIn:()=>void;signUp:()=>void;signOut:()=>void;};functioncreateCtx<ContextType>(){constctx=React.createContext<ContextType|undefined>(undefined);functionuseCtx(){constc=React.useContext(ctx);if(!c)thrownewError("useCtx must be inside a Provider with a value");returnc;}return[useCtx,ctx.Provider]asconst;}const[useAuth,SetAuthProvider]=createCtx<authContextType>();constAuthProvider:React.FC=(props)=>{constauth=useAuthCtx();return<SetAuthProvidervalue={auth}>{props.children}</SetAuthProvider>;};constuseAuthCtx=():authContextType=>{const[user,setUser]=React.useState<User|null>(null);constsignIn=()=>{// Some sign in action};constsignUp=()=>{// Some sign up action};constsignOut=()=>{// Some sign out action};return{user,signIn,signUp,signOut};};exportconstApp=()=>{constauth=useAuth();return(<AuthProvider><buttononClick={()=>{auth.signIn()}}>ログイン</button><buttononClick={()=>{auth.signUp()}}>サインアップ</button></AuthProvider>);};
