передача значений из компонента в избыточное хранилище

Question

У меня есть кнопка голосования с количеством голосов, и когда я нажимаю кнопку голосования, я вижу +/- без правильного количества голосов. Я жестко закодировал число до 12, и я могу голосовать за или против.

Хотя я не знаю, как динамически заполнить кнопку реальным значением API для счетчика.

Вот правильные значения из вызова API, расположенного в компоненте: count={api.voteScore} также обратите внимание на редуктор / действие SET_VOTE_COUNT

Вот код:

APIfetch.js

import React, {Component} from 'react';
import AddButton from './AddButton'

class Posts extends Component {
constructor(props) {
    super(props);

    this.state = {
        response: ''
    };
}

componentDidMount() {
    getPostAsync('/posts').then(data => this.setState({ response: data }));
}

render() {

    return (
    <div className="App">
        <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

        {Array.isArray(this.state.response) &&
            this.state.response.map(api => <>

                { api.voteScore}
                {console.log(api.voteScore)}

                <AddButton className="voting"
                    count={api.voteScore} />
                <p> { api.title }, by { api.author } </p>
                <p> { api.body } </p>
                <p> {api.category} </p>
            </>
        )}

        </header>
    </div>
    )
}
}
async function getPostAsync(api) {
    let response = await fetch(api);
    let data = await response.json()
    return data;
}

export default Posts;

AddButton.js

import React from 'react';
import { connect } from 'react-redux';

const mapDispatchToProps = dispatch => {
  return {
    // dispatching plain actions
    setVoteCount: () => dispatch({ type: 'SET_VOTE_COUNT', count: '12' }),
  }
}

const AddButton = props => (
  <div className="voting">
    <button onClick={() => {
      console.log(props.setVoteCount(props.count));
    }}>
      Vote
    </button>
  </div>
);


export default connect(null, mapDispatchToProps)(AddButton);

action.js

export const setVoteCount = (id) => {
    return {
        type: "SET_VOTE_COUNT",
        count: '',
        id
    };
}

reducer.js

import { createStore, applyMiddleware, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const change_counter = (state = {}, action) => {
    switch (action.type) {

        case "SET_VOTE_COUNT":
        if (state.id !== action.id) {
            return state;
        }
        return {
                ...state,
        }
        case "INCREMENT":
        if (state.id !== action.id) {
            return state;
        }
        return {
            ...state,
            count: parseInt(state.count) + 1
        };
        case "DECREMENT":
        if (state.id !== action.id) {
            return state;
        }

        return {
            ...state,
            count: parseInt(state.count) - 1
        };
        default:
        return state;
    }
    };
    let nextId = 0;
    const counters = (state = [], action) => {
        switch (action.type) {
        case "ADD_COUNTER":
            return [...state, {id: nextId++, count: 0}];
        case "SET_VOTE_COUNT":
                return [...state, {id: nextId++, count: action.count}];
        case "INCREMENT":
            return state.map(counter => change_counter(counter, action));
        case "DECREMENT":
            return state.map(counter => change_counter(counter, action));
        default:
            return state;
        }
    }
    export default createStore(counters, composeEnhancers(applyMiddleware()));

Заранее спасибо