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を使っている点など異なる部分がいくつかあり再現することができませんでした。
どこに問題があるのでしょうか。
ご存じの方がいらっしゃれば、教えていただけないでしょうか。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー