リアクションの初期状態への移入

Question

私はリアクトに新しく、かなり混乱しています。私はルート/コンテナコンポーネント内のデータを取得する私のアプリケーションの最初の反復を構築します。ここで

export function getUserData(url){ 

    return fetch(url, { credentials : 'include'}) 
       .then((response) => { return response.json();}) 
       .then((data) =>{ return new User(data.public_id, data.yahoo_profile.givenName, data.yahoo_profile.familyName, data.credentials[0].account);}); 
} 

は今、私は私のアプリを再構築する過程にいるよとReduxのを使用してデータを管理取得したい、コンテナ

class HomePage extends React.Component{ 

    constructor(props) { 
    super(props); 
    this.state = {user: null}; 

    } 
    componentWillMount() { 

    getUserData(xobni_api).then((result) =>{ 
     this.setState({user : result}); 

    }); 


    render(){ 
    return(

     {this.state.user && 
     <div className="col-md-8 middle-pane"> 
      <Viewer images={this.state.user} /> 
     </div> 
     } 

    ); 
    } 

} 

これはgetUserData機能であるのです。ここに私のcondifgureStore

export default function configureStore(initialState){ 
    return createStore(
    rootReducer, 
    initialState, 
    applyMiddleware(reduxImmutableStateInvariant()) 
); 
} 

だと私は私のindex.js

const store = configureStore(initialState); 

でストアをインスタンス化しています。そして、私はこの1つのように、私の個々のレデューサーにこの状態を渡す必要があります。

export default function homePageReducer(state, action){ 
    switch(action.type){ 
    case 'SEND_IMAGE': 
     //send image 

    default: 
     return state; 
    } 
} 

私はこれを行う正しい方法を見つけることができないようです。誰かが私のコンポーネントからapi呼び出しをどのように移動し、店舗で呼び出しを行い、初期状態を設定してからコンポーネントに戻すことができるかについて少し詳細な回答を手伝っていただければ幸いです。 ありがとうございます。私は私の頭の中に打たReduxの概念の

Answer 1

一つは次のとおりです。

ディスパッチアクションが

（などクロムAPIを呼び出し、データのフェッチ）どんなストアを更新しないようにしましょうあなたのケースでその概念を試してみる：

fetch(url, { credentials : 'include'}) 
    .then((response) => { return response.json();}) 
    .then((data) => { 
    // create a new user 
    const newUser = new User(data.public_id, data.yahoo_profile.givenName, data.yahoo_profile.familyName, data.credentials[0].account); 

    // once you have the new user. 
    // time to update the store. 
    dispatch({ 
     type: 'UPDATE_STORE_WITH_NEW_USER' 
     payload: { 
     user: newUser, 
     }, 
    }); 
    }); 

次の質問は、あなたがdispatch機能を得るのですか。悪い

import store from 'path/to/store'; 

store.dispatch({ type: 'ACTION_TO_BE_DISPATCHED' }); 

：一つの方法は、このようなディスパッチ関数をインスタンス化ストアをインポートし、呼び出すことです。これで、アクションをディスパッチする必要があるたびにストアをインポートする必要があります。

ご紹介redux-thunk !!これが必要な理由を理解するには、hereを参照してください。 redux-thunkを使用すると、次のようにアクションを作成することができます

代わりに、このようなプレーンな基本動作の

fetchAndUpdateStore() { 
    // notice that this returns a function 
    return (dispatch) => { 
    fetch(url, { credentials : 'include'}) 
     .then((response) => { return response.json();}) 
     .then((data) => { 
     // create a new user 
     const newUser = new User(data.public_id, data.yahoo_profile.givenName, data.yahoo_profile.familyName, data.credentials[0].account); 

     // now you can dispatch function easily. 
     dispatch({ 
      type: 'UPDATE_STORE_WITH_NEW_USER' 
      payload: { 
      user: newUser, 
      }, 
     }); 
     }); 
    } 
} 

：

someBasicAction =() => ({ 
    type: 'BASIC_ACTION', 
}); 

さて、最後の部分がアクションを派遣し、中にあなたのデータにコンポーネントを接続することです店舗。

import { connect } from 'react-redux'; 
import fetchAndUpdateStore from 'path/to/that/action'; 

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

const mapDispatchToProps = (dispatch) => ({ 
    fetchThenUpdate:() => (
    dispatch(fetchAndUpdateStore()) 
), 
}); 

connect(mapStateToProps, mapDispatchToProps)(YourComponent); 

最後に、this.props.fetchThenUpdateに電話することができます。

Answer 2

APIコールをコンポーネントに残し、呼び出しが完了したらアクションをディスパッチします。これにより、configureStoreに副作用がなく、ユーザーに現在の進捗状況に関するフィードバックを与えることができます（ローディングスピナーの表示など）