Reactでreducerの中でHooksを使おうとするとエラーになる

Question

##やりたいこと
reduxjs/toolkitを使ってreducerの中で定義したcreateの中でfireStoreのコレクションをアップデートしたい。

抱えている問題とエラーメッセージ

reducerの中のcreate内でアップデートしたいのですが、できないです。何かいい方法はないでしょうか？

Line 22:7: React Hook "useFirestore" is called in function "create" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

##コード

//projectModule.js
export const projectModule = createSlice({
  name: "projects",
  initialState: initState,
  reducers: {
    create: (state, action) => {
      console.log(action)
      state.list.push(action.payload);
      // useFirestore().collection('projects').add(action.payload)
    },
    decrement: (state, action) => state,
  },
});

//CreateProject.js
import React, { useState } from "react";
import { projectModule } from '../../modules/ProjectModule'
import { useDispatch } from 'react-redux'
import { useFirestore } from 'react-redux-firebase'

export const CreateProject = () => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const dispatch = useDispatch()
  const firestore = useFirestore()

  const handleSubmit = (e) => {
    e.preventDefault()
    const project = { id: '4', title, content }
    console.log(project)
    // dispatch(projectModule.actions.create(project))　ここでエラーになる
    firestore.collection('projects').add(project) //これでアップデートできるが、reducerを使ってできないか知りたいです。

  };

Answer 1

reducerの中のcreate内でアップデートしたいのですが、できないです。

はい、Hooks関数はコンポーネント内へ直接書く、あるいは別なHooksの中に書く必要があります。Reducerの中には書けません。

Comments

[anonyrabbit]

ご回答ありがとうございます。
単純にこの場合はreducerを使う時ではなく、いつでもreducerを使えばいいというわけではないというように理解しておけばよいのでしょうか？

[maisumakun]

「Reducerで生成した結果をuseEffectで回収してFirestoreを動かす」、あるいは「reducerから呼ぶFirestoreはuseFirestore以外の方法で取得する」、という正反対なルートをたどる解決策2つを考えてみました。

（Firestoreをガンガン使っているわけでもないので、どちらがうまくいくとも言えませんが）