値の受け取り方がわからない。(JSの構文)

Question

状況

現在ReactとExpressを用いて、データをサーバーと同期するTodoアプリを作ってます。

困ってること

アプリ起動時に、サーバーから持ってきたデータをStateに代入したいのですが、undifinedが返されてしまいます。

// サーバーからUserのデータを持ってくる
const getAllTodos = (username) => {
  const data = { createdBy: username };
  const config = {
    method: 'get',
    url: `${API_URL}all`,
    headers: {
      'x-access-token': JSON.parse(localStorage.getItem('user')).accessToken,
      'Content-Type': 'application/json',
    },
    params: data,
  };

  return axios(config)
    .then((response) => response.data)
    .catch((error) => error);
};

const username = localStorage.getItem('username');
// StateにTodoデータを返すための関数
function initialState() {
  if (username) {
    // usernameのデータを取ってくる
    getAllTodos(username)
      .then((data) => data) // undifinedが返されてしまう。
      .catch((error) => []);
    )
  } else {
    return [];
  }
}

// TodoデータのReducer
export default function (state = initialState(), action) {
  const { type, payload } = action;
  switch (type) {
  case SET_TODO:
    return [ ...payload ];
  case ADD_TODO:
    console.log(payload);
// 以下省略

質問

getAllTodosからどのようにデータを取り出すのかわかりません。誰か教えていただけませんか？

コード

途中までではございますが、リンクを貼っておきます。
https://github.com/HappyJohnConnor/ReactTodoClient/tree/auth

Answer 1

function initialState() {
  if (username) {
    // usernameのデータを取ってくる
    getAllTodos(username)
      .then((data) => data) // undifinedが返されてしまう。
      .catch((error) => []);
    )
  } else {
    return [];
  }
}

この関数は、ifの側に進んだ場合は値を返しませんし、非同期に取得する値を同期的に返す方法はありません。そのままPromiseを返して、受け取った側で.thenをつないで使うことになります。