Selectorをコンポーネントから切り離す

コンポーネントからStoreの依存を消して純粋なViewコンポーネントにする

code:tsx

// getUserArticlesがSelector

// StoreからViewに必要なデータを取得する処理を押し込む

const selectUserArticles = ({ store = store, userId}) => {

const user = /* storeとuserIdからuserを引いてくる */

const articles = /* storeとuserからarticlesを引いてくる */

return {

...user,

articles

}

}

// Selectorはpropsのデフォルト値にすることで、このコンポーネントはstoreとは疎結合になる

const UserArticlesContainer = ({ userId, selectUserArticles = selectUserArticles}) => {

const articles = useSelector(selectUserArticles({ userId }))

return <UserArticlesView articles={articles }/>

}

const UserArticlesView = /*~*/

// モックしやすいしLifting state upもできる

<UserArticlesContainer userId={1} articles={/*~*/} />

若干冗長なのがネックか

code:tsx

const userArticlesState = selectorFamily({

key: "userArticles",

get: (userId:number) => ({get}) => {

const user = get(usersState(userId))

return user.articles

}

})

const UserArticlesContainer = ({ userId, userArticlesState = userArticlesState}) => {

const articles = useRecoilValue(userArticlesState(userId))

return <UserArticlesView articles={articles }/>

}

const UserArticlesView = /*~