我是React的初学者，所以请多多包涵。几个小时以来，我一直在努力尝试解决这个问题，但无法理解我在做什么错。

一切正常，只需查找并加载0个错误即可。但是，当我尝试启动一个动作时，绝对没有任何反应。我正在记录状态，并且在应用程序首次启动后就没有多余的日志了。

所以我要构建的是超级简单的练习应用程序。屏幕上只有一个单词，每个字母本身就是一个组成部分。用户可以单击两个按钮中的任意一个，在单词的开头或结尾添加字母。而已。 我仅有的两个动作是添加这些字母。

这是我的主要App.js：

import React from 'react';
import Header from './Header';
import Adder from './Adder';
import CurrentWord from './CurrentWord';
import { connect } from 'react-redux';
import { addLetterStart,addLetterEnd } from '../actions';

class App extends React.Component {

    render() {
        console.log(this.props.word);
        return (
            <div>
                <Header />
                <div style={{ margin: "100px",display: "flex",justifyContent: "center"}}>
                    <Adder onClick={()=> this.props.addLetterStart()} />
                    <CurrentWord />
                    <Adder onClick={()=> this.props.addLetterEnd()} />
                </div>
            </div>
        )
    }
};

const mapstatetoProps = (state) => {
    return {
        word: state.word
    }
};

export default connect(mapstatetoProps,{addLetterStart,addLetterEnd})(App);

这是我的CurrentWord组件：

import React from 'react';
import SingleLetter from './SingleLetter'
import { connect } from 'react-redux';


class CurrentWord extends React.Component {
    renderLetters() {
        return this.props.word.map(letter => {
            return <SingleLetter key={Math.floor(Math.random() * 100)} letter={letter} />
        });

    }

    render() {
        return (
            <div style={{ display: "flex" }}>
                {this.renderLetters()}
            </div>
        )
    }
};

const mapstatetoProps = (state) => {
    return { word: state.word }
};

export default connect(mapstatetoProps)(CurrentWord);

这些是我的动作（actions / index.js）

import {ADD_END,ADD_START} from './types';


export const addLetterStart = () => {
    return {
        type: ADD_START
    };
};

export const addLetterEnd = () => {
    return {
        type: ADD_END
    };
};

我的LettersReducer：

import { ADD_END,ADD_START } from '../actions/types';

export default (state = ['X','X','X'],action) => {
    switch (action.type) {
        case ADD_START:
        return ['X',...state];

        case ADD_END:
        return [...state,'X'];

        default:
            return state;
    }
};

我的reducers / index.js：

import { combineReducers } from 'redux';
import LettersReducer from './LettersReducer';

export default combineReducers({
    word: LettersReducer
});

还有我的主要index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import App from './components/App';
import reducers from './reducers';

const store = createStore(reducers);

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

这是我的加法器组件：

import React from 'react';

const Adder = () => {

    return (
        <div classname="ui card" style={{
            height: "150px",width: "150px",justifyContent: "center",alignItems: "center",cursor:"pointer",margin: "10px"
        }}>
            <p style={{
                fontSize: "80px",color: "#ececec" }}>+</p>
        </div>
    )

};

export default Adder;

我认为这应该与所有相关。我将不胜感激，谢谢！