還元剤の状態は空です

Question

私はreact-redux webappで作業しています。今まではすべての操作がajaxのリクエストに関連していましたので、redux thunk and axiosを使用しています。 今、「タスク」というオブジェクトからリストを作成するコンポーネントで作業しています。これは非常に単純なものでなければなりません：アクション呼び出しはタスクオブジェクトを送り、減速器は 'タスク'状態の配列でそれを追加します。

問題が発生した場合、リデューサは常にタスクオブジェクト配列を書き換えます。レデューサー呼び出しの開始時にconsole.logを実行すると、状態は常に空であることがわかります。

import {DROP_TASK} from '../actions/types' 

export default function (state = {}, action) { 
    switch (action.type){ 
     case(DROP_TASK): 

      console.log("state", state); // here is shows object{} 

      console.log('tasks', state.tasks); 

      if(state.tasks === undefined || state.tasks === null) { 

       return {...state, list: [action.payload]} 
      } 



      return {...state, list: [...state.tasks.list, action.payload]}; 
     default: 
      return state 
    } 
} 

CREATESTOREでindex.jsで私がやっている

：ここ

はコードですロガーが直前に全体の状態をCONSOLE.LOG

const createStoreWithMiddleware = applyMiddleware(reduxThunk, logger)(createStore); 

すべての発送の後に。だから、私は減速機機能のためのディスパッチの前に、 "タスク"が最初の呼び出しの後に設定されていることを知っています。

import { combineReducers } from 'redux'; 
import {reducer as form} from 'redux-form'; 
import {reducer as uiReducer} from 'redux-ui'; 
import authReducer from './auth_reducer'; 
import treeReducer from './tree_reducer'; 
import media_asset_list_reducers from './media_asset_list_reducers'; 
import tasks from './tasks'; 

const reducers = combineReducers({ 
    form: form, 
    auth: authReducer, 
    tree: treeReducer, 
    media_asset_list: media_asset_list_reducers, 
    tasks: tasks, 
    ui: uiReducer 
}); 


export default reducers; 

誰も私を助けることができる：ここで

は、私は減速を組み合わせてる方法ですか？

ありがとうございました

Answer 1

どのようにレデューサーを組み合わせているのかわかりません。しかし、あなたのレデューサーの半分は、フォームtasks.listにサブ状態を取得するよう書かれていますが、フォームのリストに新しい状態を返します。

あなたはcombineReducersと減速を構成する場合は、組み合わせる各減速機は、状態のちょうどそのサブパートを取得（そしてそれはそれは同様に返すべきものである）

Answer 2

試してみてください。

import {DROP_TASK} from '../actions/types' 

export default function (state = {}, action) { 
    switch (action.type){ 
     case(DROP_TASK): 
      return {...state, list: [...state.list, action.payload]}; 
     default: 
      return state 
    } 
} 

あなたの減速が届きます状態のスライスはstate.tasksですので、このレデューサーに.tasksを含める必要はありません。また

import {DROP_TASK} from '../actions/types' 

export default function (state = [], action) { 
    switch (action.type){ 
     case(DROP_TASK): 
      return [...state, action.payload]; 
     default: 
      return state 
    } 
} 

：あなたはあなたに減速を変えることができることリストをlist層を除去し、ちょうどtasksを持つようにしたい場合は

{ 
    ... //other reducers 
    tasks: { 
    list: [] 
    } 
} 

：

これは、のような状態のツリーになります、DROP_TASKは、listにアイテムを追加するための奇妙なアクションタイプのようです...しかし、あなたのアプリについてもっと知っているわけではありませんが、それはまだ適切かもしれないので、もしそうなら、これを無視してください。