ボタンをクリックしたときに減速機からデータを取得できないのはなぜですか？

Question

ReactとReduxを使って簡単なアプリケーションを構築しています。上、左、下、右の4つのボタンがあります。 「上」をクリックすると項目が上に移動し、「下」をクリックすると項目が下に移動します。しかし、ボタンをクリックすると、アイテムはまったく動かない。さらに悪いことに、コンソールをクリックしたときにコンソールにエラーメッセージが表示されませんでした。ここに私のコードは、これまでのところです：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider, connect } from 'react-redux'; 
import { createStore, combineReducers } from 'redux'; 
import './index.css'; 
import registerServiceWorker from './registerServiceWorker'; 

const reducers = combineReducers({ 
    vertical: (state={style: 40}, action) => { 
     console.log("Inside the vertial reducer", action.type); 
     if (action.type === "UP") { 
      //Reassign outside the return statement 
      state.style = state.style - 10; 
      return state; 
     } else if (action.type === "DOWN") { 
      state.style = state.style + 10; 
      return state; 
     } else { 
      return state; 
     } 
    }, 

    horizontal: (state={style: 40}, action) => { 
     console.log("Inside the horizontal reducer", action.type); 
     if (action.type === "LEFT") { 
      state.style = state.style - 10; 
      return state; 
     } else if (action.type === "RIGHT") { 
      state.style = state.style + 10; 
      return state; 
     } else { 
      return state; 
     } 
    } 
}); 

const a = state => { 
    return { 
     vertical: state.vertical.style, 
     horizontal: state.horizontal.style 
    }; 
}; 

const b = dispatcher => { 
    return { 
     clickUp:() => { 
      dispatcher({ type: "UP" }) 
     }, 
     clickDown:() => { 
      dispatcher({ type: "DOWN" }) 
     }, 
     clickLeft:() => { 
      dispatcher({ type: "LEFT" }) 
     }, 
     clickRight:() => { 
      dispatcher({ type: "RIGHT" }) 
     } 
    }; 
}; 

const container = connect(a, b); 

//This is my component 
const C = ({ vertical, horizontal, clickUp, clickDown, clickLeft, clickRight }) => { 
     console.log("this is from C", vertical); 
     return (
      <div> 
       <button onClick={clickUp}>Up</button> 
       <button onClick={clickDown}>Down</button> 
       <button onClick={clickLeft}>Left</button> 
       <button onClick={clickRight}>Right</button> 
       <img style={{top:vertical+"px", left:horizontal+"px", position:"absolute", width:"40px", height:"40px"}} src={"https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAglAAAAJDIwYjM0NDEwLTViMTMtNGE2Yi05OGZlLTUwOGE2N2IxMjFlOQ.jpg"} alt="" /> 
      </div> 
     ); 
}; 

const App = container(C); 

const store = createStore(reducers); 

ReactDOM.render(
    <Provider store={store}> 
     <App /> 
    </Provider>, document.getElementById('root')); 
registerServiceWorker(); 

私はverticalとhorizontal減速タイプをconsole.logと私はボタンをクリックしたときに正しい型を与えています。 Cコンポーネントのverticalにconsole.logを試してみましたが、ボタンをクリックしたときに値を取得できません。私のコンソールに番号をログアウトすることは考えられますが、そうではありません。だから、コンソールに何もエラーを表示せずにボタンをクリックしたときに私の状態が更新されていないようです。私は何度も自分のコードを見て、何も見つけることができません。私のコードを修正する方法と、なぜ私のコードが黙って失敗するのかアドバイスを受けることができますか？

Answer 1

レデューサーでは、新しい状態を作成するのではなく、以前の状態を上書きしています。 Reduxはコンポーネントの状態を以前のものと同じであると考えて更新しないので、再レンダリングプロセスを最適化しようとしますが、そうしないようにします。

は、以下にごレデューサーを更新し、期待どおりにアプリが動作するはずです：

const reducers = combineReducers({ 
    vertical: (state={style: 40}, action) => { 
     switch (action.type) { 
      case 'UP': { 
       return Object.assign({}, state, { 
        style: state.style - 10 
       }); 
      } 
      case 'DOWN': { 
       return Object.assign({}, state, { 
        style: state.style + 10 
       }); 
      } 
      default: { 
       return state; 
      } 
     } 
    }, 

    horizontal: (state={style: 40}, action) => { 
     switch (action.type) { 
      case 'LEFT': { 
       return Object.assign({}, state, { 
        style: state.style - 10 
       }); 
      } 
      case 'RIGHT': { 
       return Object.assign({}, state, { 
        style: state.style + 10 
       }); 
      } 
      default: { 
       return state; 
      } 
     } 
    } 
});