-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[jello] Week4 #55
base: jello
Are you sure you want to change the base?
[jello] Week4 #55
Changes from 1 commit
d8d4326
7609fb7
533cbd9
3a7379d
7b14ad3
ab44b7e
36fadd3
6cf2d1c
18f795a
d857bd0
5aced23
1f300da
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
dispatch
- `dispatch` get new state by `invoke`. - By subscribers, call every re-render methods of component with new state.
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,15 @@ | ||
import { invoke } from '../../store'; | ||
import { dispatch, subscribe } from '../../dispatch'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Vite 및 TS에 path alias를 설정해두시면 더 명확하고 안정적이게 import 할 수 있을것 같습니다. |
||
import { createElement } from '../../utils/domUtils'; | ||
import style from './MainHeader.module.css'; | ||
|
||
type MainHeaderProps = { | ||
export type MainHeaderProps = { | ||
mainViewerInfo: { | ||
targetMedia: 'total' | 'subscribed'; | ||
viewer: 'listView' | 'gridView'; | ||
}; | ||
}; | ||
|
||
export default class MainHeader { | ||
export class MainHeader { | ||
public readonly element; | ||
private tabs; | ||
private viewers; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
@@ -24,6 +24,7 @@ export default class MainHeader { | |
|
||
this.element.append(tabNav, viewerNav); | ||
this.setEvent(); | ||
subscribe(this.updateView.bind(this)) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
} | ||
|
||
private createTabs() { | ||
|
@@ -110,7 +111,7 @@ export default class MainHeader { | |
const viewerName = viewer.getAttribute('data-viewer'); | ||
const isActiveViewer = viewer.classList.contains(style.active_viewer!); | ||
if (viewerName && !isActiveViewer) { | ||
invoke({ | ||
dispatch({ | ||
type: 'changeViewer', | ||
payload: { | ||
viewer: viewerName as 'gridView' | 'listView' | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { invoke } from './store'; | ||
|
||
const subscribers: Function[] = []; | ||
|
||
export const subscribe = ( | ||
subscriber: (state: { | ||
dateInfo: Date; | ||
gridInfo: GridInfo; | ||
subscriptionInfo: string[]; | ||
mainViewerInfo: { | ||
targetMedia: 'total' | 'subscribed'; | ||
viewer: 'listView' | 'gridView'; | ||
}; | ||
news: NewsData | null; | ||
fields: FieldData[]; | ||
listIndex: number; | ||
arrowInfo: { | ||
left: boolean; | ||
right: boolean; | ||
}; | ||
}) => void | ||
) => { | ||
subscribers.push(subscriber); | ||
}; | ||
|
||
export const dispatch = (action: Action) => { | ||
const state = invoke(action)!; | ||
if (state) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Non-null assertion 혹은 type guard 중복이 되서 둘 중하나만 해주시면 될것 같습니다. |
||
subscribers.forEach((subscriber) => subscriber(state)); | ||
} | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
주가 되는 것을 default로 export하고 부가적인 것들을 그냥 export하면 짐작을 통한 불필요한 연산없이 예를 들어서, 어떤게 component인건지 구분이 바로 되서 저는 개인적으로는 이게 좋은거 같아요.