javascript - React redux 并使用异步操作解析初始化 props

Question

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

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

/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);

事实是，我根本不知道何时/何处发送我的操作来更改我的应用程序状态。事实上，我应该什么时候发送我的“showDetail('myPokemonName')”以便当前的 Pokemon 状态发生变化并且我的应用程序可以工作？

如果可能的话，我需要一些好的实践

谢谢你的帮助

编辑:

My PokeView :

import React from 'react';
import {connect} from 'react-redux';
import {loadRemoteAction} from './../../redux/modules/pokemons';
import {Link} from 'react-router';


export class PokeView extends React.Component {
  render(){
    let i = 0;
      return (
        <div>
        <h4>Super page</h4>
        <button onClick={this.props.loadRemoteAction}>Start</button>
        <ul>
        {
          this.props.pokemons.map(item => {
            i++;
            return <li key={i}><Link to={`/pokemons/${item.name}`}>{item.name}</Link></li>
          })
        }
        </ul>


        </div>
      );
  }
}

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


export default connect((mapStateToProps), {
  loadRemoteAction
})(PokeView);

我的 Action / reducer :

import immutable from 'immutable';

/**
 * Action part
 */
export const LOAD_REMOTE = 'LOAD_REMOTE';
export const SHOW_DETAIL = 'SHOW_DETAIL';

export function loadRemoteAction() {
  return dispatch => {
    fetch('http://pokeapi.co/api/v2/pokemon/')
    .then(res => res.json())
    .then(res => dispatch({
      type:LOAD_REMOTE,
      payload:res.results
    }));
  };
}

export function showDetail(name){
  return {
    type:SHOW_DETAIL,
    payload:name
  }
}

/**
 * Reducer part
 */


const ACTION_HANDLER = {
  [LOAD_REMOTE] : (state, action) => {
    if(action.payload) return Object.assign({},state,{pokemons:state.pokemons.concat(action.payload)});
    return state;
  },
  [SHOW_DETAIL] : (state, action) =>{
    let  currentPokemon;
    for(const pkm of state.pokemons){
      if(pkm.name === action.payload) currentPokemon = pkm;
    }
    if(action.payload) return Object.assign({},state,{currentPokemon:currentPokemon});
    return state
  }
}


const initialState = {pokemons:immutable.fromJS([]), currentPokemon:immutable.fromJS({name:''})};
export default function pokemonReducer (state = initialState, action) {
  const handler = ACTION_HANDLER[action.type]
  return handler ? handler(state, action) : state
}

Answer 1

一般来说， Action 是指世界上发生某事时 - 这通常是用户所做的事情，或者例如从后端到 ajax 调用的异步应答。这些是您希望发送操作(包含有关已更改内容的信息)的情况，以便可以相应地更新您的状态树。在你的例子中，如果你在屏幕上的其他地方显示了一个 Pokemon 列表，并且用户点击了其中一个，那么该点击会将点击的 Pokemon 保存到状态树，并且你的 PokeDetail 组件随后会获取此信息并显示所选口袋妖怪的详细信息。

在您的情况下，PokeView 呈现函数可能如下所示:

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

PokeDetail 类可能如下所示:

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

另一个问题是，信息最初是如何进入我的应用程序的？如果数据是静态的，您可以将它添加到您的初始状态树(通常将其作为默认参数传递给 reducer 函数)，或者您可以通过 Ajax 调用从后端查询数据。后者可以在组件的 componentDidMount 生命周期方法中完成。 (为此，您需要 redux-thunk 才能使操作与来自后端的回调和异步应答一起工作)。