ボタンをクリックしたときにレデューサーからデータを取得できないのはなぜですか?

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();

私console.logは myverticalとhorizontalreducer のタイプであり、ボタンをクリックしたときに正しいタイプを提供しています。私がしようとしたとき、私の中でコンポーネント私はボタンをクリックしたとき、私は、任意の値を取得しておりません。コンソールで番号をログアウトすることになっていますが、そうではありません。したがって、コンソールにエラーを表示せずにボタンをクリックしても、状態が更新されていないようです。コードを何度も調べましたが、何も見つかりませんでした。コードを修正する方法と、コードが静かに失敗する理由についてアドバイスをいただけますか?console.logverticalC