how to insert data to bootstrap table from redux store in react.js?

Question

I have data (array) in redux store. I have created actions and reducer for it but how can I display data that is already stored in redux store to my bootstrap table ?

my functional component that has table :

const Contacts = function () {

 
    return (
        <div>
        <table class="table table-dark">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          </tbody>
      </table>
        </div>
    )
}

  

my redux store:

import {createStore} from 'redux' import {composeWithDevTools} from 'redux-devtools-extension'

const initialState = {

contacts:[

    {
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "[email protected]",
        "address": {
          "street": "Kulas Light",
          "suite": "Apt. 556",
          "city": "Gwenborough",
          "zipcode": "92998-3874",
          "geo": {
            "lat": "-37.3159",
            "lng": "81.1496"
          }
        },
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
        "company": {
          "name": "Romaguera-Crona",
          "catchPhrase": "Multi-layered client-server neural-net",
          "bs": "harness real-time e-markets"
        }
      },
      {
        "id": 2,
        "name": "Ervin Howell",
        "username": "Antonette",
        "email": "[email protected]",
        "address": {
          "street": "Victor Plains",
          "suite": "Suite 879",
          "city": "Wisokyburgh",
          "zipcode": "90566-7771",
          "geo": {
            "lat": "-43.9509",
            "lng": "-34.4618"
          }
        },
        "phone": "010-692-6593 x09125",
        "website": "anastasia.net",
        "company": {
          "name": "Deckow-Crist",
          "catchPhrase": "Proactive didactic contingency",
          "bs": "synergize scalable supply-chains"
        }
      },
      {
        "id": 3,
        "name": "Clementine Bauch",
        "username": "Samantha",
        "email": "[email protected]",
        "address": {
          "street": "Douglas Extension",
          "suite": "Suite 847",
          "city": "McKenziehaven",
          "zipcode": "59590-4157",
          "geo": {
            "lat": "-68.6102",
            "lng": "-47.0653"
          }
        },
        "phone": "1-463-123-4447",
        "website": "ramiro.info",
        "company": {
          "name": "Romaguera-Jacobson",
          "catchPhrase": "Face to face bifurcated interface",
          "bs": "e-enable strategic applications"
        }
      },
      {
        "id": 4,
        "name": "Patricia Lebsack",
        "username": "Karianne",
        "email": "[email protected]",
        "address": {
          "street": "Hoeger Mall",
          "suite": "Apt. 692",
          "city": "South Elvis",
          "zipcode": "53919-4257",
          "geo": {
            "lat": "29.4572",
            "lng": "-164.2990"
          }
        },
        "phone": "493-170-9623 x156",
        "website": "kale.biz",
        "company": {
          "name": "Robel-Corkery",
          "catchPhrase": "Multi-tiered zero tolerance productivity",
          "bs": "transition cutting-edge web services"
        }
      }


] }


       const contactReducer =(state=initialState,action)=> {
       switch(action.type){

      default:
return state;

       }

       }

     const store=createStore(contactReducer,composeWithDevTools())

      export default store;

Answer 1

You can use the react-redux and get the state. You can check the example here

import { useSelector } from 'react-redux'


const Contacts = function () {
     //choose your reducer from store
     const data = useSelector(state => state.yourReducerName)

     //data for use
     <tbody>
         {data.map(contact => (
            <tr>
             <th scope="row">{contact.id}</th>
             <td>{contact.name}</td>
             <td>{contact.username}</td>
             <td>{contact.email}</td>
            </tr>
         ))}
       </tbody>
}

Answer 2

If you have data in redux store you can use like this:

    import { connect } from 'react-redux';

    const Contacts = function ({contacts}) {

 
    return (
        <div>
        <table class="table table-dark">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
         {contacts.map(element => (
          <tr>
            <th scope="row">{element.id}</th>
            <td>{element.name}</td>
            <td>{element.username}</td>
            <td>{element.email}</td>
          </tr>
         ))}
       </tbody>
    
      </table>
        </div>
    )
   }

   function mapStateToProps(state) {
     return {
       contacts: state.contacts //get store data 
    };
  }

  export default connect(mapStateToProps, null)(AccountMenu)