React Redux throws error when displaying records in a Modal View

Question

I have asked similar question which has been answered here but it was for Reactjs only and not for react redux . Reactjs shows only first record each time a modal pop up button is clicked

Here am trying to display Records on Bootstraps Modal Popup via React Redux when a view button is clicked.

Similarly I have 9 records in the React Redux array.

     { "name" : "Tony", "Age" : "18"},
     { "name" : "John", "Age" : "21" },
     { "name" : "Luke", "Age" : "78" },
     { "name" : "Mark", "Age" : "90" },
     { "name" : "Jame", "Age" : "87" },
     { "name" : "Franco", "Age" : "34" },
     { "name" : "Franco", "Age" : "34" },
     { "name" : "Biggard", "Age" : "19" },
     { "name" : "tom", "Age" : "89" },

The code displays all the records with each records having its Modal view button . The problem am having is that each time I click on view button of any record so as to display the record in the modal view, it will display error

bundle.js:58831 Uncaught TypeError: _this.rec is not a function
    at Applications._this.viewData 

below is the code

    import React from 'react';
    import { Link } from 'react-router-dom';
    import { connect } from 'react-redux';

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

    class Applications extends React.Component {

      constructor(props) {
            super(props);
            this.state = {
              currentRec: undefined,
            };
        this.viewData = this.viewData.bind(this);
       }

       componentDidMount() {
          this.rec=this.props.dispatch(userActions.getAll_Records());
       }

     // Display Data in a Modal when View button is Clicked
     viewData = (i) => {
        //this.setState({ currentRec: i });
        this.rec({ currentRec: i });
        console.log(`Selected record index: ${i}`);
      }

        render() {
          const { user, users } = this.props;
          return (
             <div className="ml">
                    <div className="responsive-table">
            {users.items &&        
              <table className="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Age</th>
                                <th >view</th>
                            </tr>
                            </thead>
                            <tbody>
                            {users.items.map((user, i) =>
                               <tr key={user.id}>
                                  <td>{user.id}</td>
                                  <td>{user.name}</td>
                                  <td>{user.Age}</td>
                                  <td  className="btn btn-primary btn-sm"><button
                                    type="button"
                                    onClick={() => { this.viewData(i); }}
                                    className="btn btn-primary btn-sm"
                                    data-toggle="modal"
                                    data-target="#myModal"
                                     >
                                   view from Modal
                                </button>
                                </td>
                            </tr>
                            )}
             </tbody>
          </table>
        }
    </div>

    //Modal Start
     <div className="modal" id="myModal">
              <div className="modal-dialog">
                <div see={this.see} className="modal-content">
                  <div className="modal-header">
                    <h4 className="modal-title">Show Records in Modal</h4>
                    <button type="button" className="close" data-dismiss="modal">
                      &times;
                    </button>
                  </div>

                  {this.state.currentRec !== undefined && 
                      <div className="modal-body">
                        Name: {this.rec[this.state.currentRec].name} <br />
                        Age: {this.rec[this.state.currentRec].Age} <br />
                      </div>}

                  <div className="modal-footer">
                    <button
                      type="button"
                      className="btn btn-danger"
                      data-dismiss="modal"
                    >
                      Close
                    </button>
                  </div>
                </div>
              </div>
            </div>
    //Modal Ends
    </div>
            );
        }
    }


    function mapStateToProps(state) {
        const { users } = state;
        const { user } = state;
        return {
            user,
           users
        };
    }

const connectedApplications = connect(mapStateToProps)(Applications);
export { connectedApplications as Applications };

An Updates

If I implement this.props.rec=this.props.dispatch(userActions.getAll_Records());

it will show error TypeError: Cannot add property rec, object is not extensible at Applications.componentDidMount

I think the problem lies in the setState() within the ViewData() Method which prevents the records from being displayed in the Modal view

Here is my reducer files

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

export function users(state = {}, action) {
  switch (action.type) {

case userConstants.GETALL_REQUEST:
  return {
    ...state,
    loading: true
  };
case userConstants.GETALL_SUCCESS:
  return {
    loading: false,
    error: null,
    items: action.users
  };

Answer 1

This line is incorrect:

this.rec=this.props.dispatch(userActions.getAll_Records());

When you use disptach you are sending data to your redux store. You should get the updated state value via your mapStateToProps function. You should not use this.rec

You haven't shown us what your redux state structure is but you should use your dispatch to update it and then use this.props.rec in place of this.rec