如何插入数据引导表从redux存储在react.js?

Question

我有数据(数组)在redux存储。我已经为它创建了action和reducer，但是我如何才能将已经存储在redux存储中的数据显示到我的bootstrap表中?

我的功能组件表:

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

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

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)