Javascript React redux和使用异步动作解析初始化道具

我正在学习redux和react，我在道具初始化的良好实践方面遇到了一些问题

事实上，我的路线如下所示：

/pokemons/:name

以下是相关部分：

import React from 'react';
import {connect} from 'react-redux';
import {showDetail} from './../../redux/modules/pokemons';

export class PokeDetail extends React.Component{

  render(){
    return(
      <div>
        {this.currentPokemon.name}
      </div>
    )
  }

}


const mapStateToProps = state => ({
  currentPokemon:state.pokemons.currentPokemon
});

export default connect((mapStateToProps),{
  showDetail
})(PokeDetail);

---

一般来说，动作是指世界上发生的事情——这通常是用户所做的事情，或者是从后端到ajax调用的异步响应。在这些情况下，您可能希望发送一个操作（包含有关更改内容的信息），以便相应地更新状态树。 在您的情况下，如果您在屏幕上的其他地方显示一个口袋妖怪列表，并且用户单击其中一个，那么单击将把单击的口袋妖怪保存到状态树中，然后您的

PokeDetail

组件将拾取此信息并显示所选口袋妖怪的详细信息

在您的情况下，

PokeView

render函数可能如下所示：

export class PokeView extends React.Component {
  render(){
    return (
      <div>
        <h4>Super page</h4>
        <button onClick={this.props.loadRemoteAction}>Start</button>
        <ul>
        {
          this.props.pokemons.map((item, i) => <li key={i}><button onClick={this.props.dispatch(showDetail(item.name))}>{item.name}</button></li> )
        }
        </ul>
      </div>
    );
  }
}

export class PokeDetail extends React.Component{
  render(){
    return <div>{this.props.currentPokemon.name}</div>;
  }
}

---

另一个问题是，这些信息最初是如何进入我的应用程序的？如果数据是静态的，则可以将其添加到初始状态树（通常会将其作为默认参数传递给reducer函数），或者可以通过Ajax调用从后端查询数据。后者可以在组件的

componentDidMount

生命周期方法中完成。（为此，您需要

redux-thunk

，以便使操作与回调和后端的异步应答一起工作）。

您可以使用包。您可以找到此软件包的示例用法。

您应该在componentWillMount函数中调用showDetail操作

import React from 'react';
import {connect} from 'react-redux';
import {showDetail} from './../../redux/modules/pokemons';

export class PokeDetail extends React.Component{
  componentWillMount() {
    // If you are using react-router, route params will be in `params` property object.
    const pokemonId = this.props.params.id;
    this.props.showDetail(pokemonId);
  }

  componentWillReceiveProps(nextProps) {
    // Also you may want to update your component when url was changed.
    if (nextProps.params.id !== this.props.params.id) {
      this.props.showDetail(nextProps.params.id);
    }
  }

  render(){
    return(
      <div>
        {this.currentPokemon.name}
      </div>
    )
  }

}


const mapStateToProps = state => ({
  currentPokemon:state.pokemons.currentPokemon
});

export default connect((mapStateToProps),{
  showDetail
})(PokeDetail);

从“React”导入React；
从'react redux'导入{connect}；
从“/../../redux/modules/pokemons”导入{showtail}；
导出类PokeDetail扩展React.Component{
组件willmount（）{
//如果您使用的是react路由器，路由参数将位于'params'属性对象中。
const pokemonId=this.props.params.id；
this.props.showdeail（口袋妖怪）；
}
组件将接收道具（下一步）{
//此外，您可能希望在url更改时更新组件。
if（nextrops.params.id！==this.props.params.id）{
this.props.showDetail（nextrops.params.id）；
}
}
render（）{
返回(
{this.currentPokemon.name}
)
}
}
常量mapStateToProps=状态=>({
currentPokemon:state.pokemons.currentPokemon
});
导出默认连接（（MapStateTops）{
展示细节
})(PokeDetail),；

当您的组件正在安装（或更新）时，您正在使用pokemon id调用您的操作。下一步，您的商店将被更新，并且您将在PokeDetail组件中收到所需的道具

---

对于异步操作，您可能还需要一个包。

我实际上是从远程API加载列表的，它工作得很好。事实上，我无法在细节页面中加载初始道具（口袋妖怪已经加载到列表中的状态树中，我在reducer中获取它，并使用实际选择的口袋妖怪更改状态树），但我需要在更改页面时获取它。嗯，我不完全理解您正在尝试做什么，但我刚刚注意到，您可能希望在渲染函数中使用

{this.props.currentPokemon.name}

，这是正确的。从一开始：我做了一个异步操作来获取口袋妖怪列表。当我单击类似的项目时，我会在另一个组件的/pokemons/：name上重定向。事实上，新组件必须知道谁是状态树中当前的口袋妖怪，才能显示其信息。我不知道如何传递“SHOW_DETAIL”操作的结果（必须在列表中找到好的口袋妖怪并将其放入当前的口袋妖怪状态对象中）。就像我在回答中所说的：在你的情况下，如果你在屏幕上的其他地方显示一个口袋妖怪列表，并且用户单击其中一个，然后点击将把点击的口袋妖怪保存到状态树中，然后你的PokeDetail组件将获取该信息并显示所选口袋妖怪的详细信息。那么就不再需要showdeail函数了。事实上，我不知道我的PokeDetail应该从哪里获得这些信息。我是说在哪个功能中？渲染是不可变的，所以我不知道：-/

export class PokeDetail extends React.Component{
  render(){
    return <div>{this.props.currentPokemon.name}</div>;
  }
}

import React from 'react';
import {connect} from 'react-redux';
import {showDetail} from './../../redux/modules/pokemons';

export class PokeDetail extends React.Component{
  componentWillMount() {
    // If you are using react-router, route params will be in `params` property object.
    const pokemonId = this.props.params.id;
    this.props.showDetail(pokemonId);
  }

  componentWillReceiveProps(nextProps) {
    // Also you may want to update your component when url was changed.
    if (nextProps.params.id !== this.props.params.id) {
      this.props.showDetail(nextProps.params.id);
    }
  }

  render(){
    return(
      <div>
        {this.currentPokemon.name}
      </div>
    )
  }

}


const mapStateToProps = state => ({
  currentPokemon:state.pokemons.currentPokemon
});

export default connect((mapStateToProps),{
  showDetail
})(PokeDetail);