how to pull out state from the old way of redux

Question

I'm trying to learn the old way of redux by doing a simple task where after the user types whatever in the search bar and clicks enter, it'll render the query string in all caps. I thought that once I click on the enter button, the state of the query would be dispatched and in the reducer, it would return the payload.toUpperCase() and I can pull that from the store but it doesn't seem to work, nothing happens and no errors are shown

// Capitalize.jsx
import React, { useState } from 'react';
import { connect } from 'react-redux';
import { capitalizeLetters } from '../actions/capitalizeActions';
import { CAPITALIZE_LETTERS } from '../actions/actionTypes';

const Capitalize = ({ capitalize }) => {
    const [query, setQuery] = useState('');
    return (
        <div>
            <input
                type='text'
                placeholder='Capitalize Me...'
                onChange={e => setQuery(e.target.value)}
            />
            <button onClick={() => capitalizeLetters(query)}>Enter</button>
            <p>{capitalize}</p>
        </div>
    );
};

const mapStateToProps = state => ({
    capitalize: state.capitalize.value,
});

const mapDispatchToProps = dispatch => ({
    capitalizeLetters: query => dispatch(capitalizeLetters(query)),
});

export default connect(mapStateToProps, mapDispatchToProps)(Capitalize);


// capitalizeActions.js
import { CAPITALIZE_LETTERS } from './actionTypes';

export const capitalizeLetters = letters => dispatch => {
    dispatch({
        type: CAPITALIZE_LETTERS,
        payload: letters,
    });
};

// capitalizeReducer.js
import { CAPITALIZE_LETTERS } from '../actions/actionTypes';

const initialState = {
    value: '',
};

const capitalizeReducer = function (state = initialState, action) {
    switch (action.type) {
        case CAPITALIZE_LETTERS:
            return {
                ...state,
                value: action.payload.toUpperCase(),
            };
        default:
            return state;
    }
};

export default capitalizeReducer;


// rootReducer.js
import { combineReducers } from 'redux';
import counterReducer from './counterReducer';
import capitalizeReducer from './capitalizeReducer';

export default combineReducers({
    counter: counterReducer,
    capitalize: capitalizeReducer,
});

Answer 1

const mapStateToProps = state => ({
    capitalizedQuery: state.capitalize.capitalizedQuery,
});

const mapDispatchToProps = dispatch => ({
    dispatchCapitalizeLetters: query => dispatch(capitalizeLetters(query)),
});

const Capitalize = ({ capitalize, dispatchCapitalizeLetters /*call this*/ }) => {
    const [query, setQuery] = useState('');
    return (
        <div>
            <input
                type='text'
                placeholder='Capitalize Me...'
                onChange={e => setQuery(e.target.value)}
            />
            <button onClick={() => dispatchCapitalizeLetters(query)}>Enter</button>
            <p>{capitalize}</p>
        </div>
    );
};

Named them like this so you can see the difference