Redux内オブジェクトの値を使用して、それを別のオブジェクトのキーとして使用したい。

Question

実現したいこと

Reduxのステートに格納してあるログイン時に取得したuserオブジェクトから、メールアドレスを抽出し、そのメールアドレスをキーとしてtokenDict内のトークンを取得したい。なお、ログイン時に格納したuserからはemailのみが必要なため、userInfoインターフェース内はemailのみとなっている。

発生している問題

問題としては、userEmailをtokenDictの引数として渡した際に、userInfoのインターフェース内のemailに？をつけなければ、"Property 'email' is missing in type '{}' but required in type 'userInfo'."というエラーが出てしまい、？をつけると"Property 'email' of type 'string | undefined' is not assignable to string index type 'string'."というエラーが出てしまっていて立ち止まっています。2つ目のエラーはオブジェクトのキーがundefinedを許すことはpropertyがemailのみということもあり、許されないことは理解しております。エラーとログイン時に返ってくるUserオブジェクトは以下のスクリーンショットの通りになります。

コード

//tokenDict.tsx
export const tokenDict: { [email: string]: string } = {
  "[e-mail]": "sample_token1",
  "[e-mail]": "sample_token2",
};

//HomeScreen.tsx
interface userInfo {
  email: string; //email vs email?
  [key: string]: string; 
}
const HomeScreen: React.FC = () => {
  const user: userInfo = useGlobalState("user"); //user object returned from login process is stored in user state in Redux.
  const userEmail: string = user.email;
  const token = tokenDict[userEmail];

//App.tsx
const App: React.FC = () => {
  const user = useGlobalState("user");
  const dispatch = useDispatch();

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        dispatch({
          type: "SET_USER",
          user: authUser,
        });
      } else {
        dispatch({
          type: "SET_USER",
          user: {},
        });
      }
    });
    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <Router>
      <div className="app">
        <Switch>
          <Route path="/login">
            <Header />
            <Login />
          </Route>
          <Route path="/">
            <Header />
            <div className="app__mainscreen">
              <ChatScreen />
            </div>
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

export default App;

//reducer.tsx
export const initialState = {
  user: {},
};
export type State = typeof initialState;

export type Action = { type: "SET_USER"; user: {} };

export const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case "SET_USER":
      return {
        ...state,
        user: action.user,
      };
    default:
      return state;
  }
};

export default reducer;

//StateProvider.tsx
import React, { createContext, useContext, useReducer } from "react";
import { Action, initialState, reducer, State } from "./reducer";

const stateContext = createContext(initialState);
const dispatchContext = createContext((() => 0) as React.Dispatch<Action>);

export const Provider: React.ComponentType = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <dispatchContext.Provider value={dispatch}>
      <stateContext.Provider value={state}>{children}</stateContext.Provider>
    </dispatchContext.Provider>
  );
};

export const useDispatch = () => {
  return useContext(dispatchContext);
};

export const useGlobalState = <K extends keyof State>(property: K) => {
  const state = useContext(stateContext);
  return state[property];
};

補足情報

• TypeScript
• React

Answer 1

どの箇所でエラーがでているのか、また、あなたのコードすべてを知らないので、これは推測ですが、おそらくuseGlobalState("user")から空のオブジェクトが返ってきているため、userInfoの定義と合わず、エラーを起こしているのではないでしょうか？

以下、確認してみてください:

• useGlobalStateフックの使い方は正しいか (多くの場合、stateを更新するフックは、useStateと同じように、state自身とそのstateを更新する関数の2つを配列で返します。)
• useGlobalState("user");から返ってくる型はuserInfoに一致するか
• user stateは常にemailプロパティを持っているか

追記

• User stateの初期値が { email: "" } の場合

reducer.tsにて、まずUser typeを定義すると使い回せるので楽です。上記の場合、User stateは常にemailプロパティが必要になります。

// reducer.ts
type User = {
    email: string;
}
export type State = {
    user: User;
};
export const initialState: State = {
    user: { email: "" },
};
export type Action = { type: "SET_USER"; user: User };

// userを初期化
dispatch({
    type: "SET_USER",
    user: { email: "" },
});

  const user = useGlobalState("user"); //user object returned from login process is stored in user state in Redux.
  const userEmail = user.email
  const token = tokenDict[userEmail]

Comments

[at3250]

ご回答ありがとうございます。先ほど、ほぼ全てののソースコードとUserオブジェクトの返り値を追加いたしました。Urawayさんがご指摘してくださった最後の確認点で、reducerないのinitialStateをUserの返り値と合わせていたため、その部分がエラーの大本になってそうです。ただ、initialState = {user: {email:""}}でtype Action = {type: "SET_USER"; user: {email:string}}にするとApp.tsxのUseEffect内にあるdispatchのuserのところにエラーが出ていて、Type User is not assignable to {email: string}と出てしまいます。他にも色々とリサーチしたりしていますが、自分のTSへの知識不足もあり、いまだにこの問題を解消できていません。もし何か解消への手がかりがありましたら、ご教示いただけると非常に幸いです。よろしくお願いいたします。＊コードブロック機能がコメントには無いみたいで、読みづらくなってしまい申し訳ありません。

[uraway_]

その変更により、user stateは常にemailプロパティが必須になったので、user stateを空にする処理の行う際にも、emailプロパティが必要です。追記したので、ご確認ください

[at3250]

ご丁寧なご説明をしてくださり感謝しております。uraway様のご協力により、無事にバグが解消され、プログラムが思い通りに動くようになりました。本当にありがとうございました。