如何从 react.js 中的 redux 存储向引导表插入数据？

Posted 2023-02-19

【中文标题】如何从 react.js 中的 redux 存储向引导表插入数据？

【英文标题】：how to insert data to bootstrap table from redux store in react.js?

【发布时间】：2021-05-06 13:41:32

【问题描述】：

我在 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 导入 composeWithDevTools 从 'redux-devtools-extension'

常量初始状态 =

contacts:[

    
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "[e-mail]",
        "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": "[e-mail]",
        "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": "[e-mail]",
        "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": "[e-mail]",
        "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;

【问题讨论】：

用 jsx 循环你的数据

【参考方案1】：

您可以使用react-redux 并获取状态。您可以查看示例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>

【讨论】：

然后我如何将该数据插入行和列？

@TipsandTricksOfChess 我已经更新了答案。诀窍是你需要在useSelector 函数中选择你自己的reducer。然后可以使用map函数循环遍历数组

【参考方案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)

【讨论】：

tsecheukfung01 说要使用钩子......钩子允许您订阅 Redux 存储和调度操作，而无需将组件包装在 connect() 中。