Bdtjtk

React Redux: how to update vote counts in React Redux.
A react js equivalents has been answered

here

The code below was designed to update a voting system. It works fine by displaying the results as the page loads.

Here is my problem: I need to update each user's upvote and downvote any time the Upvote Vote and Down Vote button is clicked respectively.

However, when I click either Upvote por down vote button am having error below in my Reducer

Uncaught (in promise) ReferenceError: items1 is not defined.

This error is triggered on
Reducer section for Sending upvote and down vote on constant VOTE_SUCCESS_POST

In the backend, I have php code which returns the array data as per below.

Can someone help me with displaying the array values and updating eg (upvote to 11 and downvote to 7) depending on how the user voted?

<?php

// Update user response on a post



    $return_arr= array("upvote"=>"11", "downvote"=>"7");



    echo json_encode($return_arr);

    exit;



?>

Here is the array return by API Call

[{"upvote":"11", "downvote":"7"}]

Here is the code

import React from 'react';

import { Link } from 'react-router-dom';

import { connect } from 'react-redux';



import { vActions } from '../_actions';



class VoteApp extends React.Component {



constructor(props) {

        super(props);

this.state = {

            us: 0



        };



    }



    componentDidMount() {

this.props.dispatch(userActions.getVote());

    }

 handleupvote(person_id,person_vote) {



    return (e) => this.props.dispatch(userActions.vote(person_id,person_vote));



    }





 handledownvote(person_id,person_vote) {



    return (e) => this.props.dispatch(userActions.vote(person_id,person_vote));



    }



    render() {

        const { post1, posts1 } = this.props;

        return (

            <div style={{background:'red'}} className="well col-md-12">



                <p>Vote System in React Redux</p>





   {posts1.items1 &&

                    <ul>

                        {posts1.items1.map((post1, index1) =>

                            <li key={post1.id}>

                                {post1.name} -- (Upvote: {post1.upvote})-- (downvote: {post1.downvote})



<br />



                    <input type="button" value="upvote"  onClick={this.handleupvote(post1.id,1)}  />

                    <input type="button" value="downvote"  onClick={this.handledownvote(post1.id,1)}  />





                            </li>

                        )}



                    </ul>

                }





            </div>







        );

    }

}





function mapStateToProps(state) {

    const { posts1} = state;

    const { post1 } = state;

    return {

        post1,

        posts1

    };

}



const connectedVoteApp = connect(mapStateToProps)(VoteApp);

export { connectedVoteApp as VoteApp };

Here is my Reducer

import { userConstants } from '../_constants';



export function posts1(state = {}, action) {

  switch (action.type) {







case userConstants.GETALL_REQUEST:

  return {

   // ...state,

    loading: true

  };

case userConstants.GETALL_SUCCESS:

  return {

    loading: false,

    error: null,

    items1: action.posts1

  };



    case userConstants.GETALL_FAILURE:

      return { 

        error: action.error

      };







// Reducer section for Sending upvote and down vote



 case userConstants.VOTE_REQUEST_POST:



 return {

        ...state,

 items1: state.items1.map(post1 =>

          post1.id === action.id

            ? { ...post1}

            : post1

        )



      };



    case userConstants.VOTE_SUCCESS_POST:

 return {

        ...state,

        items1: state.items1.map(post1 => {

          if (post1.id !== action.id) {



//return { ...post1, upvote: action.posts1.items1[0].upvote,  downvote: action.posts1.items1[0].downvote };

return { ...post1, upvote: items1[0].upvote,  downvote: items1[0].downvote };



          }



          //return post1;

        })

      };





    case userConstants.VOTE_FAILURE_POST:

 return { 

        error: action.error

      };









    default:

      return state

  }

}

This is what fix my problem. Since the json data returned is in array.
items1: action.posts1[0].upvote

Thanks