Javascript 何时何地在react组件中填充redux存储
我目前正在尝试将我的后端数据库连接到我的redux应用商店，并将我的redux应用商店连接到我的前端应用程序。数据库和redux都很好，运行良好。我需要知道的是如何将我的“getItems（）”函数放在我的react前端，这样我的redux商店就可以从数据库中获取项目，而不会破坏我的react应用程序。我目前的方法使用componentDidMount（）来计时getItems（）函数，但这会导致问题，我希望在这之前做些更进一步的工作。我曾经考虑过使用constructor（）生命周期方法，或者在mapStateToProps（）函数中使用一些方法，但这两种方法都被奇怪地弃用了/或者文档很差。我想知道是否有人能给我一些具体的答案或类似的实例 MusicList.js：Javascript 何时何地在react组件中填充redux存储,javascript,reactjs,react-native,redux,react-redux,Javascript,Reactjs,React Native,Redux,React Redux,我目前正在尝试将我的后端数据库连接到我的redux应用商店，并将我的redux应用商店连接到我的前端应用程序。数据库和redux都很好，运行良好。我需要知道的是如何将我的“getItems（）”函数放在我的react前端，这样我的redux商店就可以从数据库中获取项目，而不会破坏我的react应用程序。我目前的方法使用componentDidMount（）来计时getItems（）函数，但这会导致问题，我希望在这之前做些更进一步的工作。我曾经考虑过使用constructor（）生命周期方法，或者
import React，{Component，useState}来自“React”；
从“/Items”导入项目；
从“/AddItem”导入AddItem；
从“react redux”导入{connect}；
从“./actions/itemActions”导入{getItems，deleteItem，addItem，toggleItem}
从“道具类型”导入道具类型；
从“/AppNavbar.js”导入AppNavbar；
类MusicList扩展组件{
componentDidMount=（）=>{
this.props.getItems（）；
}
切换=（id）=>{
this.props.toggleItem（id）
console.log（this.props.item.items）
}
delItem=（id）=>{
this.props.deleteItem（id）
}
addItem=（项目，url）=>{
this.props.addItem（项目，url）
console.log（this.props.item.items）
}
render（）{
const{items}=this.props.item
console.log（项目）
返回(
{/*
-
现在播放：
{占位符标题}
-
-
-
)
}
}
AppNavbar.propTypes={
切换：需要PropTypes.func.isRequired，
项目：PropTypes.array.isRequired
}
导出默认AppNavbar；
class AppNavbar extends Component {
state = {
placeholderTitle: "Who asked (Feat: Nobody)",
track_index: 0,
isShuffling: false,
isLooping: false,
isPlaying: false
};
playTrack = () => {
console.log(this.state.track_index)
this.state.isPlaying = true;
// playpause_btn.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
// Load a new track
if (this.state.isShuffling) {
this.setState({
track_index: Math.floor(Math.random() * this.props.items.length)
})
this.props.toggle(this.props.items[this.state.track_index]._id)
}
else {
this.props.toggle(this.props.items[this.state.track_index]._id)
}
// Update details of the track
this.setState({
placeholderTitle: this.props.items[this.state.track_index].name
})
console.log(this.props.items[this.state.track_index])
// Move to the next track if the current finishes playing
// using the 'ended' event
}
playpauseTrack = () => {
// Switch between playing and pausing
// depending on the current state
if (!this.state.isPlaying) this.playTrack();
else this.pauseTrack();
}
pauseTrack = () => {
// Pause the loaded track
this.setState({
isPlaying: false
})
// Replace icon with the play icon
// playpause_btn.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';
this.props.toggle(this.props.items[this.state.track_index]._id)
}
nextTrack = () => {
// Go back to the first track if the
// current one is the last in the track list
// much preferred imo. very easy to reason about, probably more performant
const settingTempState = () => {
// this acts as a sort of "draft" version of the next state
const tempState = { ...this.state }
// you use it throughout the function instead of this.state
if (tempState.track_index < this.props.items.length - 1 && !tempState.isLooping) {
tempState.track_index = tempState.track_index + 1
}
else if (tempState.isLooping) {
tempState.track_index = tempState.track_index
}
else {
tempState.track_index = 0
}
console.log(tempState.track_index)
// only one state update occurs
this.setState(tempState, () => this.playTrack())
}
settingTempState()
console.log(this.state.track_index)
// Load and play the new track
}
prevTrack = () => {
// Go back to the last track if the
// current one is the first in the track list
const settingTempState = () => {
// this acts as a sort of "draft" version of the next state
const tempState = { ...this.state }
// you use it throughout the function instead of this.state
if (tempState.track_index > 0 && !tempState.isLooping) {
tempState.track_index = tempState.track_index - 1
}
else if (tempState.isLooping) {
tempState.track_index = tempState.track_index
}
else {
tempState.track_index = this.props.items.length - 1
}
// only one state update occurs
this.setState(tempState, () => this.playTrack())
}
settingTempState()
console.log(this.state.track_index)
// Load and play the new track
}
// Connect to loop track icon
loopTrack = () => {
if (!this.state.isLooping) {
this.loopOn();
this.shuffleOff();
}
else this.LoopOff();
}
// Connect to shuffle track icon
shuffleTrack = () => {
if (!this.state.isShuffling) {
this.shuffleOn();
this.LoopOff();
}
else this.shuffleOff();
}
loopOn = () => {
this.setState({
isLooping: true
})
console.log("1" + this.state.isLooping)
}
LoopOff = () => {
this.setState({
isLooping: false
})
console.log("2" + this.state.isLooping)
}
shuffleOn = () => {
this.setState({
isShuffling: true
})
console.log("3" + this.state.isShuffling)
}
shuffleOff = () => {
this.setState({
isShuffling: false
})
console.log("4" + this.state.isShuffling)
}
render() {
console.log(this.props.items)
return (
<Navbar className="Navbar">
<NavbarBrand id="Logo" href="#home">
<img
alt=""
src={require('D:/Parrot/Desktop/Dev/Duplicate/Embedded_Music_Player/client/src/images/Logo-Smaller.png')}
/>
</NavbarBrand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<ul className="navbar-nav">
<li>
<a href="#" className="Title">
Embedded Music
</a>
</li>
</ul>
</Nav>
<Nav className="mr-auto">
<div id="PlayerBox">
<ul className="navbar-nav">
<li>
<header id="Player">
Now Playing:
</header>
<header id="Player">
{this.state.placeholderTitle}
</header>
<img class="btnPrev Previous transparent" id="Player"
alt=""
onClick={this.prevTrack}
src={require('D:/Parrot/Desktop/Dev/Duplicate/Embedded_Music_Player/client/src/images/Previous-smallest.png')}
/>
<img class="btnPlayPauseTrack playpauseTrack transparent" id="Player"
alt=""
onClick={this.playpauseTrack}
src={require('D:/Parrot/Desktop/Dev/Duplicate/Embedded_Music_Player/client/src/images/Play-smallest.png')}
/>
<img class="btnNext Next transparent" id="Player"
alt=""
onClick={this.nextTrack}
src={require('D:/Parrot/Desktop/Dev/Duplicate/Embedded_Music_Player/client/src/images/Next-smallest.png')}
/>
<img class="btnLoop Loop transparent" id="Player" style={{opacity: this.state.isLooping ? "1" : "0.8"}}
alt=""
onClick={this.loopTrack}
src={require('D:/Parrot/Desktop/Dev/Duplicate/Embedded_Music_Player/client/src/images/Loop-small.png')}
/>
<img class="btnShuffle Shuffle transparent" id="Player" style={{opacity: this.state.isShuffling ? "1" : "0.8"}}
alt=""
onClick={this.shuffleTrack}
src={require('D:/Parrot/Desktop/Dev/Duplicate/Embedded_Music_Player/client/src/images/Shuffle-smallest.png')}
/>
</li>
</ul>
</div>
</Nav>
<ul className="navbar-nav">
<li>
<a href="#Help/FAQ">
<Button className="btn btn-secondary Button">Help/FAQ</Button>
</a>
</li>
<li>
<a href="#Contact">
<Button className="btn btn-secondary Button">Contact</Button>
</a>
</li>
<li>
<a href="#Donate">
<Button className="btn btn-secondary Button">Donate</Button>
</a>
</li>
</ul>
</Navbar.Collapse>
</Navbar>
)
}
}
AppNavbar.propTypes = {
toggle: PropTypes.func.isRequired,
items: PropTypes.array.isRequired
}
export default AppNavbar;
类AppNavbar扩展组件{
状态={
标题：“谁问（专长：无人）”，
轨道索引：0，
isShuffling:错，
isLooping:错，
isPlaying:错误
};
播放曲目=（）=>{
console.log（this.state.track_索引）
this.state.isplay=true；
//playpause_btn.innerHTML=''；
//装载新轨道
if（this.state.isShuffling）{
这是我的国家({
track_index:Math.floor（Math.random（）*this.props.items.length）
})
this.props.toggle（this.props.items[this.state.track\u index]。\u id）
}
否则{
this.props.toggle（this.props.items[this.state.track\u index]。\u id）
}
//更新轨道的详细信息
这是我的国家({
占位符标题：this.props.items[this.state.track\u index].name
})
log（this.props.items[this.state.track\u index]）
//如果当前曲目播放完毕，则移动到下一曲目
//使用“结束”事件
}
playpauseTrack=（）=>{
//在播放和暂停之间切换
//取决于当前状态
如果（！this.state.isPlaying）this.playTrack（）；
否则，请使用.pauseTrack（）；
}
pauseTrack=（）=>{
//暂停加载的曲目
这是我的国家({
isPlaying:错误
})
//将图标替换为播放图标
//playpause_btn.innerHTML=''；
this.props.toggle（this.props.items[this.state.track\u index]。\u id）
}
nextTrack=（）=>{
//返回到第一个轨道，如果
//当前的是曲目列表中的最后一个
//更喜欢imo。很容易推理，可能更有效
const settingTempState=（）=>{
//这就像是下一个状态的“草稿”版本
const tempState={…this.state}
//在整个函数中使用它，而不是此.state
if（tempState.track_indexthis.playTrack（））
}
class AppNavbar extends Component {
state = {
placeholderTitle: "Who asked (Feat: Nobody)",
track_index: 0,
isShuffling: false,
isLooping: false,
isPlaying: false
};
playTrack = () => {
console.log(this.state.track_index)
this.state.isPlaying = true;
// playpause_btn.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
// Load a new track
if (this.state.isShuffling) {
this.setState({
track_index: Math.floor(Math.random() * this.props.items.length)
})
this.props.toggle(this.props.items[this.state.track_index]._id)
}
else {
this.props.toggle(this.props.items[this.state.track_index]._id)
}
// Update details of the track
this.setState({
placeholderTitle: this.props.items[this.state.track_index].name
})
console.log(this.props.items[this.state.track_index])
// Move to the next track if the current finishes playing
// using the 'ended' event
}
playpauseTrack = () => {
// Switch between playing and pausing
// depending on the current state
if (!this.state.isPlaying) this.playTrack();
else this.pauseTrack();
}
pauseTrack = () => {
// Pause the loaded track
this.setState({
isPlaying: false
})
// Replace icon with the play icon
// playpause_btn.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';
this.props.toggle(this.props.items[this.state.track_index]._id)
}
nextTrack = () => {
// Go back to the first track if the
// current one is the last in the track list
// much preferred imo. very easy to reason about, probably more performant
const settingTempState = () => {
// this acts as a sort of "draft" version of the next state
const tempState = { ...this.state }
// you use it throughout the function instead of this.state
if (tempState.track_index < this.props.items.length - 1 && !tempState.isLooping) {
tempState.track_index = tempState.track_index + 1
}
else if (tempState.isLooping) {
tempState.track_index = tempState.track_index
}
else {
tempState.track_index = 0
}
console.log(tempState.track_index)
// only one state update occurs
this.setState(tempState, () => this.playTrack())
}
settingTempState()
console.log(this.state.track_index)
// Load and play the new track
}
prevTrack = () => {
// Go back to the last track if the
// current one is the first in the track list
const settingTempState = () => {
// this acts as a sort of "draft" version of the next state
const tempState = { ...this.state }
// you use it throughout the function instead of this.state
if (tempState.track_index > 0 && !tempState.isLooping) {
tempState.track_index = tempState.track_index - 1
}
else if (tempState.isLooping) {
tempState.track_index = tempState.track_index
}
else {
tempState.track_index = this.props.items.length - 1
}
// only one state update occurs
this.setState(tempState, () => this.playTrack())
}
settingTempState()
console.log(this.state.track_index)
// Load and play the new track
}
// Connect to loop track icon
loopTrack = () => {
if (!this.state.isLooping) {
this.loopOn();
this.shuffleOff();
}
else this.LoopOff();
}
// Connect to shuffle track icon
shuffleTrack = () => {
if (!this.state.isShuffling) {
this.shuffleOn();
this.LoopOff();
}
else this.shuffleOff();
}
loopOn = () => {
this.setState({
isLooping: true
})
console.log("1" + this.state.isLooping)
}
LoopOff = () => {
this.setState({
isLooping: false
})
console.log("2" + this.state.isLooping)
}
shuffleOn = () => {
this.setState({
isShuffling: true
})
console.log("3" + this.state.isShuffling)
}
shuffleOff = () => {
this.setState({
isShuffling: false
})
console.log("4" + this.state.isShuffling)
}
render() {
console.log(this.props.items)
return (
<Navbar className="Navbar">
<NavbarBrand id="Logo" href="#home">
<img
alt=""
src={require('D:/Parrot/Desktop/Dev/Duplicate/Embedded_Music_Player/client/src/images/Logo-Smaller.png')}
/>
</NavbarBrand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<ul className="navbar-nav">
<li>
<a href="#" className="Title">
Embedded Music
</a>
</li>
</ul>
</Nav>
<Nav className="mr-auto">
<div id="PlayerBox">
<ul className="navbar-nav">
<li>
<header id="Player">
Now Playing:
</header>
<header id="Player">
{this.state.placeholderTitle}
</header>
<img class="btnPrev Previous transparent" id="Player"
alt=""
onClick={this.prevTrack}
src={require('D:/Parrot/Desktop/Dev/Duplicate/Embedded_Music_Player/client/src/images/Previous-smallest.png')}
/>
<img class="btnPlayPauseTrack playpauseTrack transparent" id="Player"
alt=""
onClick={this.playpauseTrack}
src={require('D:/Parrot/Desktop/Dev/Duplicate/Embedded_Music_Player/client/src/images/Play-smallest.png')}
/>
<img class="btnNext Next transparent" id="Player"
alt=""
onClick={this.nextTrack}
src={require('D:/Parrot/Desktop/Dev/Duplicate/Embedded_Music_Player/client/src/images/Next-smallest.png')}
/>
<img class="btnLoop Loop transparent" id="Player" style={{opacity: this.state.isLooping ? "1" : "0.8"}}
alt=""
onClick={this.loopTrack}
src={require('D:/Parrot/Desktop/Dev/Duplicate/Embedded_Music_Player/client/src/images/Loop-small.png')}
/>
<img class="btnShuffle Shuffle transparent" id="Player" style={{opacity: this.state.isShuffling ? "1" : "0.8"}}
alt=""
onClick={this.shuffleTrack}
src={require('D:/Parrot/Desktop/Dev/Duplicate/Embedded_Music_Player/client/src/images/Shuffle-smallest.png')}
/>
</li>
</ul>
</div>
</Nav>
<ul className="navbar-nav">
<li>
<a href="#Help/FAQ">
<Button className="btn btn-secondary Button">Help/FAQ</Button>
</a>
</li>
<li>
<a href="#Contact">
<Button className="btn btn-secondary Button">Contact</Button>
</a>
</li>
<li>
<a href="#Donate">
<Button className="btn btn-secondary Button">Donate</Button>
</a>
</li>
</ul>
</Navbar.Collapse>
</Navbar>
)
}
}
AppNavbar.propTypes = {
toggle: PropTypes.func.isRequired,
items: PropTypes.array.isRequired
}
export default AppNavbar;