如何將數據從 redux 存儲在 react.js 中的引導表中插入？

Question

我在 redux 商店中有數據（數組）。 我已經為它創建了動作和減速器，但是如何將已經存儲在 redux 存儲中的數據顯示到我的引導表中？

我有表的功能組件：

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>
    )
}

  

我的 redux 商店：

從“redux”導入 {createStore} 從“redux-devtools-extension”導入 {composeWithDevTools}

常量初始狀態 = {

 contacts:[ { "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "Sincere@april.biz", "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": "Shanna@melissa.tv", "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": "Nathan@yesenia.net", "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": "Julianne.OConner@kory.org", "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

您可以使用react-redux並獲得 state。 您可以在此處查看示例

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

如果您在 redux 商店中有數據，您可以這樣使用：

    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)