React Redux выдает ошибку при отображении записей в модальном представлении

Question

Я задал похожий вопрос, на который был дан ответ, но он был только для Reactjs , а не для реагирует с избыточностью . Reactjs показывает только первую запись каждый раз, когда нажимается модальная всплывающая кнопка

Здесь я пытаюсь отобразить записи в модальном всплывающем окне при помощи React Redux , когда кнопка просмотращелкнул.

Точно так же у меня есть 9 записей в массиве React Redux.

     { "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" },

Код отображает все записи с каждой записью, имеющей кнопку модального просмотра .Проблема в том, что каждый раз, когда я нажимаю на кнопку просмотра любой записи, чтобы отобразить запись в модальном представлении, будет отображаться ошибка

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

ниже указан код

    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

Если я реализую this.props.rec=this.props.dispatch(userActions.getAll_Records());

, будет отображаться ошибка TypeError: Невозможно добавить свойство rec, объект не расширяется в приложениях.componentDidMount

Я думаю, что проблема заключается в setState () в методе ViewData () , который предотвращает отображение записей в модальном представлении

Вот мой редуктор файлов

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.rec=this.props.dispatch(userActions.getAll_Records());

Когда вы используете disptach, вы отправляете данные в свое хранилище редуксов.Вы должны получить обновленное значение состояния через функцию mapStateToProps.Вы не должны использовать this.rec

Вы не показали нам, какова ваша структура избыточного состояния, но вы должны использовать свою диспетчеризацию, чтобы обновить ее, а затем использовать this.props.rec вместо this.rec