MobX のパターンを探る
furuk4wa.icon 以下、これ MobX を選ぶ理由あるっけ……?
こういう store じゃなくて
code:javascript
export class CurrentUserStore {
rootStore: RootStore
@observable token?: string
@observable memberId?: string
@observable isCheckedAccessToken: boolean = false
@observable screenName?: string
@observable avatarImageUrl?: string
changeScreenName(name: string): void {
this.screenName = name
}
}
こういう store にしていきたい
code:javascript
export class CurrentUserStore {
rootStore: RootStore
@observable currentUser?: CurrentUser
changeScreenName(name: string): void {
this.currentUser = { …this.currentUser, this.currentUser.screenName: name }
}
}
action はこういうの
https://pbs.twimg.com/media/DSs6AIyXUAAvjvy.jpg
furuk4wa.icon action の名前は type Action = 'INC' | 'DESC' とちゃんと宣言したい
Presentational コンポーネントに雑に User オブジェクト投げたいときに、下の形の方が便利
雑、というか props を渡し が発生する状況のときはだいたいオブジェクト単位で投げて、投げられた側のコンポーネントがそれをどう調理するかするべき
<Call userName={user.name} userId={user.id} /> ではなく、 <Call user={user} />
currentUserStore を投げちゃって、Presentational コンポーネントで action メソッド叩かれないために
このパターンだと「ログアウト」を考えたとき、 currentUser オブジェクトを undefined にするだけやから楽でええな
プロパティに screenName とか token とか分けているとそういう初期化処理が大変めんどう
furuk4wa.icon 風呂に入った後の冷静さ
上の reducer のパターンを適用したら reducer に Action の引数渡したくなって、 action の形が 以下のようになるよな
code:javascript
{
type: 'ADD_TODO',
payload: {
text: 'Do something.'
}
}
ただの flux-standard-action…… tonbo.icon
これめっちゃ型 書かなあかんやつやん
https://gyazo.com/04ddd4374996b605eb0650100d9e569f
なんで reducer をかますという発想になったの
初期化処理の楽さ
furuk4wa.iconプロパティに screenName とか token とか分けているとそういう初期化処理が大変めんどう
↑ の発言、初期化したいようなオブジェクトは、それはオブジェクトとして保持していたらいいよ というだけ
例えば isFetching という値が state = initalState をしないとちゃんと初期化されないってアプリケーションロジックに問題があるんじゃね
furuk4wa.icon オブジェクトのプロパティが消される・追加される、は TypeScript の型で守られている……
reducer かますのヤメで
code:javascript
const NameDisplayer = ({ name }) => <h1>{name}</h1>
const UserNameDisplayer = inject(
stores => ({
name: stores.userStore.name
})
)(NameDisplayer)
const user = mobx.observable({
name: "Noa"
})
const App = () => (
<Provider userStore={user}>
<UserNameDisplayer />
</Provider>
)
ReactDOM.render(<App />, document.body)
furuk4wa.icon というか connect の型解決のむずかしさが不満
アレ、このへん見てるとそんなに難しくなさそう?( ↓ 上の最後にはハックがあるな)
code:javascript
// Casting to prevent error where used in index.ts that isBusy is mandatory, since it is being provided by Redux.
export default withRouter(
connect<{}, {}, IAppProps>(mapStateToProps, mapDispatchToProps)(App)
) as React.ComponentClass<{}>;
型がある場合、 immutable のよさと reducer が immutable であることって一致してるっけ?
オブジェクトは値渡し
reducer 内で 引数の state をごちゃごちゃ書き換えたら view に影響でる?
すぐに newState 返すから見えないだろうけど
プロパティにそれぞれ screenName, token とかしていたのを user オブジェクトに切り出すのと、 MobX でも状態の更新は reducer を経由させようと思っていたのはぜんぜん話が違う
reducer を経由する意味よ
action creator & それに対応する reducer 処理を MobX の action で実行していく形でここは手打ち 👏
furuk4wa.icon*11 Redux へ至る旅、となってきた気もする furuk4wa.icon*18