passing values from component to redux store

Question

I have a vote button with a number of votes, and when I click the vote button, I see a +/- without the correct number of votes. I hardcoded the number to 12, and I can vote up or down.

Although I don't know how to dynamically populate the button with the real API value for the count.

Here is the correct values from the api call located in the component: count={api.voteScore} also notice the reducer/action SET_VOTE_COUNT

Here's the code:

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 => 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()));

Thanks in advance

Answer 1

Use react-redux's useSelector to get a value from the store inside a functional component. You can also use useDispatch instead of connect.

I also recommend adding redux-thunk in order to create async actions.

actions.js

async function getPostAsync(api) {
    let response = await fetch(api);
    let data = await response.json()
    return data;
}

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

export const fetchVoteCount = () => {
  return function (dispatch) {
    getPostAsync('/posts').then(data => {
      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 => state.count);

  return (
    <div className="voting">
      <button onClick={() => {
        dispatch({ type: 'SET_VOTE_COUNT', count: voteCount + 1 })
      }}>
        Vote
      </button>
    </div>
  );
}