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

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": "[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;

标签： javascriptreactjsreduxreact-reduxreact-bootstrap

Answer 1

您可以使用react-redux并获取状态。您可以在此处查看示例

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