teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問React + Reduxにおけるdispatch時のエラー

編集履歴

質問編集履歴

5

誤字の修正

2020/01/22 17:19

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -300,7 +300,7 @@
300
300
 
301
301
  ## 追記２
302
302
 
303
- DrawerItemsはMaterial-UIのDrawerの中のリストとしてインポートしています。（３行目）
303
+ DrawerItemsはMaterial-UIのDrawerの中のリストとしてインポートしています。（下から３行目）
304
304
 
305
305
  ```
306
306
 

4

追記の追加

2020/01/22 17:19

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -298,10 +298,74 @@
298
298
 
299
299
  ```
300
300
 
301
-
302
-
303
301
  ## 追記２
304
302
 
303
+ DrawerItemsはMaterial-UIのDrawerの中のリストとしてインポートしています。（３行目）
304
+
305
+ ```
306
+
307
+ 略。。。
308
+
309
+ <IconButton
310
+
311
+ color="inherit"
312
+
313
+ aria-label="open drawer"
314
+
315
+ edge="start"
316
+
317
+ onClick={handleDrawerToggle}
318
+
319
+ >
320
+
321
+ <MenuIcon />
322
+
323
+ </IconButton>
324
+
325
+ <nav aria-label="menu">
326
+
327
+ {/* The implementation can be swapped with js to avoid SEO duplication of Styledlinks. */}
328
+
329
+ <Hidden smUp implementation="css">
330
+
331
+ <Drawer
332
+
333
+ variant="temporary"
334
+
335
+ anchor="left"
336
+
337
+ open={open}
338
+
339
+ onClose={handleDrawerToggle}
340
+
341
+ ModalProps={{
342
+
343
+ keepMounted: true, // Better open performance on mobile.
344
+
345
+ }}
346
+
347
+ classes={{
348
+
349
+ paper: classes.drawerPaper,
350
+
351
+ }}
352
+
353
+ >
354
+
355
+ <div className={classes.toolbar} />
356
+
357
+ <Divider />
358
+
359
+ <DrawerItems />
360
+
361
+ </Drawer>
362
+
363
+ </Hidden>
364
+
365
+ ```
366
+
367
+ ## 追記３
368
+
305
369
  <List onClick={dispatch(actions.jwtLogout)}>の前に、console.log(dispatch)とconsole.log(dispatch(actions.jwtLogout))を実行したところ下記の様に表示されました。
306
370
 
307
371
  ```

3

追記２の編集

2020/01/22 17:18

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -302,7 +302,7 @@
302
302
 
303
303
  ## 追記２
304
304
 
305
- <List onClick={dispatch(actions.jwtLogout)}>の前に、console.log(dispatch)を実行したところ下記の様に表示されました。
305
+ <List onClick={dispatch(actions.jwtLogout)}>の前に、console.log(dispatch)とconsole.log(dispatch(actions.jwtLogout))を実行したところ下記の様に表示されました。
306
306
 
307
307
  ```
308
308
 
@@ -321,3 +321,21 @@
321
321
  }
322
322
 
323
323
  ```
324
+
325
+ ```
326
+
327
+ async dispatch => {
328
+
329
+ // TODO: gRpcログアウト && try-catch
330
+
331
+ dispatch({
332
+
333
+ type: _utils_actionTypes__WEBPACK_IMPORTED_MODULE_0__["START_REQUEST"]
334
+
335
+ });
336
+
337
+ console.log('Logout');
338
+
339
+ localStorage…
340
+
341
+ ```

2

追記２

2020/01/22 17:13

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -297,3 +297,27 @@
297
297
  export default DrawerItems
298
298
 
299
299
  ```
300
+
301
+
302
+
303
+ ## 追記２
304
+
305
+ <List onClick={dispatch(actions.jwtLogout)}>の前に、console.log(dispatch)を実行したところ下記の様に表示されました。
306
+
307
+ ```
308
+
309
+ ƒ (action) {
310
+
311
+ if (typeof action === 'function') {
312
+
313
+ return action(dispatch, getState, extraArgument);
314
+
315
+ }
316
+
317
+
318
+
319
+ return next(action);
320
+
321
+ }
322
+
323
+ ```

1

追記

2020/01/22 17:07

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -151,3 +151,149 @@
151
151
  }
152
152
 
153
153
  ```
154
+
155
+ ##追記
156
+
157
+ Material-UIでDrawerの中身をログイン時と非ログイン時で分けているのですが、非ログイン時に表示されるログアウト項目をクリックするとjwtLogoutが発火するというイメージです。
158
+
159
+ ```TypeSciript
160
+
161
+ 略。。。
162
+
163
+
164
+
165
+ const DrawerItems: React.FC = () => {
166
+
167
+ const [open, setOpen] = React.useState(false)
168
+
169
+ const dispatch = useDispatch()
170
+
171
+
172
+
173
+ const isAuthenticated = useSelector((state: any) => state.AuthReducer.isAuthenticated)
174
+
175
+
176
+
177
+ const handleDrawerToggle = () => {
178
+
179
+ setOpen(!open)
180
+
181
+ }
182
+
183
+ const openLoginDialog = () => {
184
+
185
+ dispatch({ type: actionTypes.OPEN_LOGIN_DIALOG })
186
+
187
+ handleDrawerToggle()
188
+
189
+ }
190
+
191
+
192
+
193
+ const unAuthenticated = (
194
+
195
+ 略。。。
196
+
197
+ )
198
+
199
+
200
+
201
+ const authenticated = (
202
+
203
+ <>
204
+
205
+ 略。。。
206
+
207
+ <List onClick={handleDrawerToggle}>
208
+
209
+ <StyledLink to="/mypage">
210
+
211
+ <ListItem button>
212
+
213
+ <ListItemIcon>
214
+
215
+ <AccountCircle />
216
+
217
+ </ListItemIcon>
218
+
219
+ <ListItemText primary="マイページ" />
220
+
221
+ </ListItem>
222
+
223
+ </StyledLink>
224
+
225
+ </List>
226
+
227
+ <List onClick={dispatch(actions.jwtLogout)}>
228
+
229
+ <StyledLink to="/logout">
230
+
231
+ <ListItem button>
232
+
233
+ <ListItemIcon>
234
+
235
+ <Lock />
236
+
237
+ </ListItemIcon>
238
+
239
+ <ListItemText primary="ログアウト" />
240
+
241
+ </ListItem>
242
+
243
+ </StyledLink>
244
+
245
+ </List>
246
+
247
+ <List onClick={handleDrawerToggle}>
248
+
249
+ <StyledLink to="/about">
250
+
251
+ <ListItem button>
252
+
253
+ <ListItemIcon>
254
+
255
+ <InfoIcon />
256
+
257
+ </ListItemIcon>
258
+
259
+ <ListItemText primary="自動販売機とは" />
260
+
261
+ </ListItem>
262
+
263
+ </StyledLink>
264
+
265
+ </List>
266
+
267
+ </>
268
+
269
+ )
270
+
271
+
272
+
273
+ return (
274
+
275
+ <>
276
+
277
+ { isAuthenticated === true ? authenticated : unAuthenticated }
278
+
279
+ </>
280
+
281
+ )
282
+
283
+ }
284
+
285
+
286
+
287
+ const StyledLink = styled(Link)`
288
+
289
+ text-decoration: none;
290
+
291
+ color: black;
292
+
293
+ `
294
+
295
+
296
+
297
+ export default DrawerItems
298
+
299
+ ```