反作用と非同期のアクション解決での小道具の初期化

Question

私は貧困を学習し、反応し、私は小道具の初期化の良い習慣に関して少し問題があります。

/pokemons/:name 

をそして、ここで心配コンポーネントです：実際には

、私は次のようなルートをm個

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

事実は、私はすべてのときに知っていないということです/私のアプリの状態を変更するために私のアクションを送信するには。実際、currentPokemonの状態が変わり、私のアプリが動くように、いつ私の "showDetail（ 'myPokemonName'）"を送るべきですか？

私は可能であればいくつかの良い習慣を必要とするあなたの助け

おかげ

EDITは：m

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

マイアクション/減速：

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

一般的に、アクションを話すと世界で何かが起こったときです。これは通常、au例えば、バックエンドからajax呼び出しへの非同期応答。これは、状態ツリーがそれに応じて更新されるように、アクション（変更内容に関する情報を含む）を送信したいという状況です。 あなたの場合、画面のどこかにポケモンのリストを表示し、ユーザーがそのポケモンの1つをクリックすると、クリックされたポケモンが状態ツリーに保存され、PokeDetailコンポーネントがピックアップしますこの情報を表示して、選択したポケモンの詳細を表示します。

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

他の質問は、情報がどのように行くんです、あなたの場合は

、PokeView機能は次のようになりますレンダリング私のアプリに最初に？データが静的である場合は、初期状態ツリーに追加することができます（通常はデフォルトのパラメータとして縮小機能に渡します）。または、Ajax呼び出しを使用してバックエンドからデータを照会することができます。後者は、コンポーネントのライフサイクルメソッドcomponentDidMountで実行できます。 （このためには、コールバックとバックエンドからの非同期応答と一緒に動作するアクションを実行するには、redux-thunkが必要です）。

Answer 2

redux-async-connectパッケージを使用できます。このパッケージの使用例はhereです。

Answer 3

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

コンポーネントがマウントされている（または更新中）場合、ポケモンIDでアクションを呼び出しています。次にストアが更新され、PokeDetailコンポーネントに必要な小道具が届きます。

また、非同期アクションの場合は、redux-thunkパッケージが必要な場合があります。