状況

現在React Reduxを使って、ユーザー認証つきのTodoアプリを作っております。

実現したいこと

ユーザーがログインしたときに、サーバーからユーザーのTodoリストを取得して、Stateに反映したいのですが、やり方がわかりません。

試したこと

TodoList コンポーネント内で、useEffect内で、SET_TODOSをdispatchしようとしましたが、useEffect内でdispatchは使えないとのことです。現在はTodoListコンポーネントにStateを渡すまでに下処理が出来ないかどうか模索中です。


const TodoList = () => {
  const dispatch = useDispatch();
  useEffect(
    () => {
      // サーバーからユーザーのTodoリスト持ってくる。
      const todos = ContentService.getAllTodo();
      // stateにコンテンツをセット
      dispatch({ type: 'SET_TODOS', payload: todos });
      // useSelector を使ってstateからtodoを参照
    }
  )

  const todoIds = useSelector((state) => state.todos.map(todo => todo.id));
  const renderedListItems = todoIds.map((todoId) => {
    return <TodoListItem key={todoId} id={todoId} />;
  });

  return (
    <Provider store={store}>
      <List className="list-group">{renderedListItems}</List>
    </Provider>
  );
};
const todoIds = useSelector((state) => state.todos.map(todo => todo.id));

const mapDispatchToProps = (dispatch) => {
  return {
　　// 受け取ったコンテンツをStateに反映
    setTodos: (todos) => dispatch({ type: 'SET_TODOS', payload: todos }),
  }
}
export default connect(null, mapDispatchToProps)(TodoList);