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

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

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

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

React.js

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

Q&A

解決済

1回答

3057閲覧

Reduxのstateの入れ子について

退会済みユーザー

退会済みユーザー

総合スコア0

Redux

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

React.js

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

0グッド

0クリップ

投稿2017/10/27 12:43

react,reduxを使ってアプリを作っています。
stateが入れ子になるような設計をしているのですが、理想通りの入れ子になりません。
どこに問題があるのでしょうか。

以下の画像はReduxのチュートリアルのstateの入れ子構造なのですが、これが理想の形です。
イメージ説明
todosというstateの中に複数のObject(completed,id,text)が入っています。

これを踏まえて使ってみると以下のようになってしまいました。
イメージ説明
いくつかありますが、今問題になっているのは「bookmarksReducer」の中身です。
理想の形は以下のような形なのですが、ところどころおかしな部分があります。
イメージ説明

BookmarksReducer.jsx

javascript

1import * as actionTypes from "../actionTypes" 2 3const initialState = { 4 bookmarks:{ 5 id: null, 6 bookmarkBooling: false, 7 } 8} 9 10const bookmarkReducer = (state = initialState, action) => { 11 switch (action.type) { 12 case actionTypes.ADD_RENDER_ALERT: 13 return Object.assign({}, state, { 14 id: action.id, 15 }) 16 case actionTypes.ALERT_BOOKMARK_TOGGLE: 17 if(state.id !== action.id){ 18 return state 19 } 20 return Object.assign({}, state, { 21 bookmarkBooling: !state.bookmarkBooling, 22 }) 23 default: 24 return state 25 } 26} 27 28export const bookmarksReducer = (state = [], action) => { 29 switch (action.type) { 30 case actionTypes.ADD_RENDER_ALERT: 31 return [ 32 ...state, 33 bookmarkReducer(undefined, action) 34 ] 35 case actionTypes.ALERT_BOOKMARK_TOGGLE: 36 return state.map((t) => 37 bookmarkReducer(t, action) 38 ) 39 default: 40 return state 41 } 42} 43 44export default bookmarksReducer

rootReducer.jsx

javascript

1import {combineReducers } from "redux" 2import { reducer as formReducer } from "redux-form" 3 4import { alertReducer } from './Reducers/AlertReducer' 5import { bookmarksReducer } from './Reducers/BookmarkReducer' 6 7export let rootReducer = combineReducers({ 8 alertReducer: alertReducer, 9 bookmarksReducer: bookmarksReducer, 10 form: formReducer, //あとでformReducerに名前変更 11}) 12

チュートリアルを参考に書いてみたのですが、rootReducerを使っている点など異なる部分がいくつかあり再現することができませんでした。

どこに問題があるのでしょうか。
ご存じの方がいらっしゃれば、教えていただけないでしょうか。
よろしくお願いします。

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

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

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

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

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

karamarimo

2017/10/27 14:11

initialState の時点で「理想の形」とは違っていませんか?
guest

回答1

0

ベストアンサー

参考になるといい程度ですがこんなかんじでどうでしょうか...
Flow で State の型定義してから通るように書いてみてました。

js

1// 2 3const actionTypes = { ADD_RENDER_ALERT, ALERT_BOOKMARK_TOGGLE } 4 5const initialStateBookmark = { id: 0, bookmarkBooling: false } 6 7function bookmarkReducer(state = initialStateBookmark, action) { 8 switch (action.type) { 9 case actionTypes.ADD_RENDER_ALERT: 10 return { 11 ...state, 12 id: action.id, 13 } 14 case actionTypes.ALERT_BOOKMARK_TOGGLE: 15 if (state.id !== action.id) { 16 return state 17 } 18 return { ...state, bookmarkBooling: !state.bookmarkBooling } 19 default: 20 return state 21 } 22} 23 24const initialState = { bookmarks: [] } 25 26function bookmarksReducer(state = initialState, action) { 27 switch (action.type) { 28 case actionTypes.ADD_RENDER_ALERT: 29 return { 30 ...state, 31 bookmarks: [...state.bookmarks, bookmarkReducer(undefined, action)], 32 } 33 case actionTypes.ALERT_BOOKMARK_TOGGLE: 34 return { 35 ...state, 36 bookmarks: state.bookmarks.map(t => bookmarkReducer(t, action)), 37 } 38 default: 39 return state 40 } 41} 42 43export default bookmarksReducer

Flow 型づけあり

js

1// @flow 2 3const actionTypes = { ADD_RENDER_ALERT, ALERT_BOOKMARK_TOGGLE } 4 5type Bookmark = { 6 id: number, 7 bookmarkBooling: boolean, 8} 9 10type BookmarksReducer = { bookmarks: Bookmark[] } 11 12const initialStateBookmark: Bookmark = { id: 0, bookmarkBooling: false } 13 14function bookmarkReducer( 15 state: Bookmark = initialStateBookmark, 16 action: any, 17): Bookmark { 18 switch (action.type) { 19 case actionTypes.ADD_RENDER_ALERT: 20 return { 21 ...state, 22 id: action.id, 23 } 24 case actionTypes.ALERT_BOOKMARK_TOGGLE: 25 if (state.id !== action.id) { 26 return state 27 } 28 return { ...state, bookmarkBooling: !state.bookmarkBooling } 29 default: 30 return state 31 } 32} 33 34const initialState: BookmarksReducer = { bookmarks: [] } 35 36function bookmarksReducer( 37 state: BookmarksReducer = initialState, 38 action: any, 39): BookmarksReducer { 40 switch (action.type) { 41 case actionTypes.ADD_RENDER_ALERT: 42 return { 43 ...state, 44 bookmarks: [...state.bookmarks, bookmarkReducer(undefined, action)], 45 } 46 case actionTypes.ALERT_BOOKMARK_TOGGLE: 47 return { 48 ...state, 49 bookmarks: state.bookmarks.map(t => bookmarkReducer(t, action)), 50 } 51 default: 52 return state 53 } 54} 55 56export default bookmarksReducer

投稿2017/10/27 18:50

編集2017/10/27 18:53
anozon

総合スコア662

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問