connect () не отправляет действия [React-Redux]

Question

Обновление: 12/23/2019

Я обновил Screen.js, чтобы включить предложения @Will Jenkins 'и @ Huỳnh Tuân, но он все еще не работает.

Кроме того, я добавил 2 строки кода отладки в надежде прояснить проблему.

---

Я новичок в React и новичок в Redux - и пытаюсь научиться использоватьRedux для контроля состояния моего приложения, следуя базовому учебнику (который для меня кажется более продвинутым, чем базовый). Я также посмотрел этот учебник и этот учебник по редуксу, а также аналогичные посты здесь на SO, но пока безрезультатно.

Мой проект 2компоненты;текстовый компонент для отображения сообщения, полученного из внешнего API, и кнопка, которая после нажатия получает данные из API и повторно отображает сообщение. Это оно!

Однако, когда я нажимаю на кнопку, ничего не происходит, несмотря на то, что я следую учебному пособию как можно ближе. Я обернул свой корневой контейнер в <Provider> и connect() отредактировал мои презентационные компоненты в store. Тем не менее, почему-то это все еще не работает.

Очевидно, что-то здесь не так. Может ли кто-то указать мне, что именно я делаю неправильно? Ниже приведен мой код (импорт для краткости опущен).

App.js

export default function App() {
    return (
        <Provider store={store}>
            <Screen />
        </Provider>
    )
}

Screen.js

class Screen extends React.Component {

    constructor(props) {
        super(props)
        //this.state = {question: ''}
        this.state = {reducer: { question } }
    }

    getDataFromAPI() {
        fetch('https://opentdb.com/api.php?amount=5&type=boolean')
        .then((response) => response.json())
        .then((responseJson) => {
            console.log("before", this.props.question) // undefined
          this.props.updateQuestion(responseJson.results[0].question)
            console.log("after", this.props.question) // undefined
        })
        .catch((error) => {
            console.error(error);
        });
    }

    render() {
        return (
            <View style={{flex: 1, backgroundColor:'fff', alignItems:'center', justifyContent:'center'}}>
                <Text> {this.props.question} </Text>
                <Button title='New Trivia' onPress={() => this.getDataFromAPI()} />
            </View>
        );
    }

}

{/*const mapStateToProps = (state) => {
    return {
        question: state.question
    }
}*/}
const mapStateToProps = ({ reducer: { question } }) => {
    question
}

const mapDispatchToProps = dispatch => ({
    updateQuestion: (question) => dispatch(updateQuestion(question))
})

export default connect(mapStateToProps, mapDispatchToProps)(Screen)

Actions.js

export const updateQuestion = (response) => ({
    type: UPDATE_QUESTION,
    question: response,
})

ActionTypes.js

export const UPDATE_QUESTION = "UPDATE_QUESTION"

store.js

export default createStore(rootReducer)

index.js

export default combineReducers({reducer})

Reducer.js

const initialState = { question: '' }

export default function (state = initialState, action) {
    switch(action.type) {
        case UPDATE_QUESTION: {
            return {...state, question: action.question}
        }
        default: {
            return state
        }
    }
}