Tengo un botón de votación con una cantidad de votos, y cuando hago clic en el botón de votación, veo un /- sin la cantidad correcta de votos. Codifiqué el número a 12 y puedo votar hacia arriba o hacia abajo.

Aunque no sé cómo llenar dinámicamente el botón con el valor real de API para el recuento.

Aquí están los valores correctos de la llamada api ubicada en el componente: count={api.voteScore} también nota el reductor / acción SET_VOTE_COUNT

Aquí está el código:

API fetch.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 ={amp}gt; this.setState({ response: data })); } render() { return ( {amp}lt;div className="App"{amp}gt; {amp}lt;header className="App-header"{amp}gt; {amp}lt;img src={logo} className="App-logo" alt="logo" /{amp}gt; {Array.isArray(this.state.response) {amp}amp;{amp}amp; this.state.response.map(api ={amp}gt; {amp}lt;{amp}gt; { api.voteScore} {console.log(api.voteScore)} {amp}lt;AddButton className="voting" count={api.voteScore} /{amp}gt; {amp}lt;p{amp}gt; { api.title }, by { api.author } {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; { api.body } {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; {api.category} {amp}lt;/p{amp}gt; {amp}lt;/{amp}gt; )} {amp}lt;/header{amp}gt; {amp}lt;/div{amp}gt; ) } } 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 ={amp}gt; { return { // dispatching plain actions setVoteCount: () ={amp}gt; dispatch({ type: 'SET_VOTE_COUNT', count: '12' }), } } const AddButton = props ={amp}gt; ( {amp}lt;div className="voting"{amp}gt; {amp}lt;button onClick={() ={amp}gt; { console.log(props.setVoteCount(props.count)); }}{amp}gt; Vote {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; ); export default connect(null, mapDispatchToProps)(AddButton); 

action.js

 export const setVoteCount = (id) ={amp}gt; { 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) ={amp}gt; { 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) ={amp}gt; { 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 ={amp}gt; change_counter(counter, action)); case "DECREMENT": return state.map(counter ={amp}gt; change_counter(counter, action)); default: return state; } } export default createStore(counters, composeEnhancers(applyMiddleware())); 

Gracias por adelantado

Use useSelector de useSelector -redux para obtener un valor de la tienda dentro de un componente funcional. También puede usar useDispatch lugar de connect .

También recomiendo agregar redux-thunk para crear acciones asíncronas.

actions.js

 async function getPostAsync(api) { let response = await fetch(api); let data = await response.json() return data; } export const setVoteCount = (id) ={amp}gt; { return { type: "SET_VOTE_COUNT", count: '', id }; } export const fetchVoteCount = () ={amp}gt; { return function (dispatch) { getPostAsync('/posts').then(data ={amp}gt; { dispatch(setVoteCount(data)); })); }; } 

AddButton.js

 import { useDispatch, useSelector } from 'react-redux'; import React from 'react'; export default function AddButton(props) { const dispatch = useDispatch(); const voteCount = useSelector(state ={amp}gt; state.count); return ( {amp}lt;div className="voting"{amp}gt; {amp}lt;button onClick={() ={amp}gt; { dispatch({ type: 'SET_VOTE_COUNT', count: voteCount   1 }) }}{amp}gt; Vote {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; ); }