質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

855閲覧

dispatchを複数使ったときにエラーが出ました。

yuiei

総合スコア2

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/05/25 10:53

##実現したいこと・質問したいこと
一つのreducerに対してdispatchは二つ使えるのでしょうか。あるサイトのウェブアプリをハンズオンしていて、以下のコードのような部分がありました。実際に動かしてみたのですが、以下のようなエラーが出ました。下の方のdispatchが優先されてしまい、typeがCREATE_EVENTの方のdispatchが表示されない状態になっているのではないかと予想しました。(console.logで確認したところ、どちらのaction.typeにもADD_OPERATION_LOGが入っていました。)複数のdispatchを使いたい場合、何か区別する方法などあるのでしょうか。
エラーではeventがないと言われているのでCREATE_EVENTではなく、ADD_OPERATION_LOGが入ってしまっているのではないかと思ったのですが、勘違いなのでしょうか。Reactを学び始めたばかりで推測があっていない気もするのですが、dispatchの使い方と何が原因でこのエラーが出ているのかをご教授いただけないでしょうか。よろしくお願いします。

###エラーコード

TypeError: Cannot read property 'map' of null

###実際のコード

Eventform.js

Javascript

1import React, { useState, useContext } from 'react' 2import { 3 CREATE_EVENT, 4 ADD_OPERATION_LOG, 5 DELETE_ALL_OPERATION_LOGS, 6 DELETE_ALL_EVENT 7} from '../actions' 8import AppContext from '../components/contexts/AppContext' 9import { timeCurrentIso8601 } from '../utils' 10 11const EventForm = () => { 12 //第一引数は^reducer?第二引数は初期値、第三引数は初期化のコールバック 13 //const [state, dispatch] = useReducer(reducer, []) 14 const [title, setTitle] = useState('') 15 const [body, setBody] = useState('') 16 //AppContext.Providerを使ってvalue={state,dispatch}を渡している 17 const { state, dispatch } = useContext(AppContext) 18 //イベントハンドラ(状態変化?)は関数らしい 19 const addEvent = (e) => { 20 e.preventDefault() 21 //dispacth(action) actionが必要 typeが必要 22 /* action={ 23 type:'CREATE_EVENT' 24 title, 25 body 26 } */ 27 28 //ここで作っているのがactionのtype?らしい引数で渡されているactionはここのこと 29 dispatch({ 30 type: CREATE_EVENT, 31 title, 32 body, 33 }) 34 35 dispatch({ 36 type: ADD_OPERATION_LOG, 37 description: 'イベントを作成しました', 38 operatedAt: timeCurrentIso8601() 39 }) 40 41 console.log(state.length) 42 console.log(typeof (Object.entries(state))) 43 setTitle('') 44 setBody('') 45 } 46 /* console.log(state) 47 console.log(state.length) */ 48 49 /* useEffect(() => { 50 console.log({ state }) 51 }, [state]) */ 52 53 const deleteAllEvents = (e) => { 54 e.preventDefault() 55 const result = window.confirm('全てのイベントを本当に削除しても良いですか?') 56 if (result) { 57 dispatch({ type: DELETE_ALL_EVENT }) 58 dispatch({ 59 //logを追加するtypeがaddであってそれは内容に寄らない 60 type: ADD_OPERATION_LOG, 61 description: '全てのイベントを削除しました', 62 operatedAt: timeCurrentIso8601() 63 }) 64 } 65 } 66 console.log(state) 67 const unCreatable = title === '' || body === '' 68 69 //イベントハンドラなのでイベントが引数としてわたってくる 70 const deleteAllOperationLogs = e => { 71 //ボタンをクリックするとページのリロードが走ってしまうらしい 72 e.preventDefault() 73 const result = window.comfirm('全ての操作ログを保温等に削除しても良いですか?') 74 if (result) { 75 dispatch({ type: DELETE_ALL_OPERATION_LOGS }) 76 } 77 } 78 return ( 79 <> 80 81 <form> 82 <div className="form-group"> 83 <label htmlFor="formEventTitle">タイトル</label> 84 <input className="form-control" 85 id="formEventTitle" 86 value={title} 87 onChange={e => setTitle(e.target.value)} /> 88 </div> 89 90 <div className="form-group"> 91 <label htmlFor="formEventBody">ボディ</label> 92 <textarea className="form-control" 93 value={body} 94 id="formEventBody" 95 onChange={e => setBody(e.target.value)} /> 96 </div> 97 98 <button className="btn btn-primary" 99 onClick={addEvent} 100 disabled={unCreatable} 101 >イベントを作成する</button> 102 <button className="btn btn-danger" 103 disabled={state.events.length === 0} 104 onClick={deleteAllEvents} 105 >全てのイベントを削除する</button> 106 <button className="btn btn-danger" 107 disabled={state.operationLogs.length === 0} 108 onClick={deleteAllOperationLogs} 109 >全ての操作ログを削除する</button> 110 </form> 111 <h4>イベント一覧</h4> 112 </> 113 ) 114} 115 116export default EventForm

event.js

javascript

1import { CREATE_EVENT, DELETE_ALL_EVENT, DELETE_EVENT } from '../actions' 2 3//stateはアラタに作っている空の配列、actionはフォームに入力した値を引っ張ってきたpropsみたいなイメージだと思う 4//typeはデフォルトで決まっているのか、それとも自分で設定しているのかは謎 5//eventformから 6const events = (state = [], action) => { 7 switch (action.type) { 8 case CREATE_EVENT: 9 const event = { title: action.title, body: action.body, } 10 const length = state.length 11 //三項演算子の結果をidに代入 12 const id = length === 0 ? 1 : state[length - 1].id + 1 13 return [...state, { id: id, ...event }]//id : id よりidのみで書くことも可能 14 15 case DELETE_EVENT: 16 //わたってきたeventのidと削除ボタンを押したactionのidを見比べている。削除ボタンを押したものがaction.idに入っているのでevent.idと一致してしまうはずである。 17 //そこで一致していないものをfilterで残しているので削除ボタンを押したもののみが消えるようになっている。 18 return state.filter(event => event.id !== action.id) 19 20 case DELETE_ALL_EVENT: 21 22 return [] 23 24 } 25 console.log(action.type) 26 return null 27 28} 29 30export default events

operationlog.js

Javascript

1import { 2 DELETE_ALL_OPERATION_LOGS, 3 ADD_OPERATION_LOG 4} from '../actions/index' 5 6//これがreducerらしい 7const operationLogs = (state = [], action) => { 8 console.log(action.type) 9 switch (action.type) { 10 case ADD_OPERATION_LOG: 11 const operationLog = { 12 description: action.description, 13 operatedAt: action.operatedAt 14 } 15 return [operationLog, ...state] 16 case DELETE_ALL_OPERATION_LOGS: 17 return [] 18 default: 19 return state 20 } 21} 22 23export default operationLogs

reducer/index.js

javascript

1import { combineReducers } from 'redux' 2 3import events from './events' 4import operationLogs from './operationLogs' 5 6console.log(combineReducers) 7//events.jsをimportして丸々conbinereducersで囲っている 8export default combineReducers({ events, operationLogs })

###試してみたこと
action.typeをconsole.log()で確認した

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FKM

2021/05/26 02:39

redux dispatch multipleで検索すると解決法らしきものが出てきますね。 オブジェクトにするみたいです(Reduxは未着手なので回答としては自信ないですが)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問