データフェッチ時にミドルウェアで再帰的に呼び出すアクション

Question

子とヘッダコンポーネントをレンダリングするコンポーネントアプリケーションがあります。私はboolを読み込んでプリローダーをレンダリングするか、またはboolに依存してページを生成する反応ローダーレポからPreloaderを使用します。アプリケーションcomponentWillMountは、データがactionCreators、アクションを使用Reduxの-API-ミドルウェア経由でフェッチするとアプリでをレンダリング実行すると、その後、ヘッダーは再帰的に実行boundGetPhotosは、私はここからログインconsole screenshotにPHOTOS_GET_SUCCESSを見てactionCreatorを介してデータをフェッチ私ののfetchingMiddlewareのaction.type。すべてのアクションは私のミドルウェアからfetchingMiddlewareの下を通過します。それは何度も何度も実行して、なぜ再帰的行動の理由からすることができ、私はそれ

を解決する方法のApp

import React, { Component, PropTypes } from 'react'; 
import Counterpart from 'counterpart'; 
import { connect } from 'react-redux'; 
import Loader from 'react-loader'; 
import { bindActionCreators } from 'redux'; 
import { getFriends, getMessages } from '../data/Data.Actions'; 
import { getUsers } from '../users/Users.Actions'; 
import Header from './Header'; 

class App extends Component { 
    componentWillMount() { 
    const { boundGetFriends, boundGetMessages, boundGetUsers } = this.props; 
    boundGetFriends(); 
    boundGetMessages(); 
    boundGetUsers(); 
    } 

    render() { 
    const { children, fetching } = this.props; 

    return (
     <Loader loaded={!fetching.size}> 
     <div> 
      <Header/> 
      {children} 
     </div> 
     </Loader> 
    ); 
    } 
} 

App.propTypes = { 
    boundGetUsers: PropTypes.func, 
    boundGetMessages: PropTypes.func, 
    boundGetFriends: PropTypes.func, 
    fetching: PropTypes.array 
}; 

export default connect((store) => { 
    return { 
    fetching: store.fetching 
    }; 
}, (dispatch) => { 
    return { 
    boundGetUsers: bindActionCreators(getUsers, dispatch), 
    boundGetFriends: bindActionCreators(getMessages, dispatch), 
    boundGetMessages: bindActionCreators(getFriends, dispatch) 
    }; 
})(App); 

ヘッダー

import React, { Component, PropTypes } from 'react'; 
import React, { Component, PropTypes } from 'react'; 
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import ImmutablePropTypes from 'react-immutable-proptypes'; 
import { getPhotos } from '../user/User.Actions'; 

class Header extends Component { 
    componentWillMount() { 
    const { boundGetPhotos } = this.props; 
    boundGetPhotos(); 
    } 

    render() { 
    return (
     <Navbar fluid collapseOnSelect> 
     <Navbar.Brand> 
      <a href="/">MyProject</a> 
     </Navbar.Brand> 
     </Navbar> 
    ); 
    } 
} 

Header.propTypes = { 
    boundGetPhotos: PropTypes.func.isRequired 
}; 

export default connect((store) => null, (dispatch) => { 
    return { 
    boundGetPhotos: bindActionCreators(getPhotos, dispatch) 
    }; 
})(Header); 

FetchingMiddleware

import { startFetching, endFetching } from './FetchingMiddleware.Actions'; 

export default store => next => action => { 
    console.log(action.type); 
    if (typeof action !== 'function' && action.type.search(/REQUEST/) !== -1) { 
    store.dispatch(startFetching()); 
    } 
    if (typeof action !== 'function' && action.type.search(/SUCCESS|FAILURE/) !== -1) { 
    store.dispatch(endFetching()); 
    } 

    next(action); 
}; 

FetchingMiddlewareReducers

import Immutable from 'immutable'; 
import { END_FETCHING, START_FETCHING, RESET_FETCHING } from './FetchingMiddleware.Actions'; 
import createReducer from '../utils/utils'; 

function addFetching(state, action) { 
    return state.push(true); 
} 

function removeFetching(state, action) { 
    return state.pop(); 
} 

function resetFetching(state, action) { 
    return Immutable.List(); 
} 

export default createReducer({ 
    [END_FETCHING]: removeFetching, 
    [START_FETCHING]: addFetching, 
    [RESET_FETCHING]: resetFetching 
}, Immutable.List()); 

FetchingMiddlewareActions

export const END_FETCHING = 'END_FETCHING'; 
export const START_FETCHING = 'START_FETCHING'; 
export const RESET_FETCHING = 'RESET_FETCHING'; 

export function endFetching() { 
    return { 
    type: END_FETCHING 
    }; 
} 

export function startFetching() { 
    return { 
    type: START_FETCHING 
    }; 
} 

export function resetFetching() { 
    return { 
    type: RESET_FETCHING 
    }; 
} 

getPhotos

import { CALL_API } from 'redux-api-middleware'; 
export const PHOTOS_GET_SUCCESS = 'PHOTOS_GET_SUCCESS'; 

export function getPhotos() { 
    return { 
    [CALL_API]: { 
     endpoint: '/photos', 
     method: 'GET', 
     headers: { 
     'Content-Type': 'application/json' 
     }, 
     credentials: 'include', 
     types: ['REQUESTPHOTOS', PHOTOS_GET_SUCCESS, 'FAILURE'] 
    } 
    }; 
} 

Answer 1

あなた<Header />コmponentは、あなたの状態コンテナ（Redux）やディスパッチについては何も知らない純粋なコンポーネントでなければなりません。

このアプローチを使用すると、コンポーネントツリーに「接続」があり、Reduxの認識がすべてのコンポーネントに追加されます。 Reduxを別の状態コンテナに置き換えたいのであれば、スケーラビリティの点では悪いことです。

すべての状態とアクションを小道具にバインドして、<Header />コンポーネントなどのコンポーネントにツリーを渡すことをお勧めします。

これにより、発生している問題も解決するはずです。

のApp

import React, { Component, PropTypes } from 'react'; 
import Counterpart from 'counterpart'; 
import { connect } from 'react-redux'; 
import Loader from 'react-loader'; 
import { getMasterDataSchema, getMasterDataData } from '../masterdata/MasterData.Actions'; 
import { getQuestionnaireSchema } from '../questionnaireschema/QuestionnaireSchema.Actions'; 
import Header from './Header'; 

class App extends Component { 
    componentWillMount() { 
    const { 
     GetMasterDataData, 
     GetMasterDataSchema, 
     GetQuestionnaireSchema 
    } = this.props; 

    GetMasterDataData(); 
    GetMasterDataSchema(); 
    GetQuestionnaireSchema(); 
    } 

    render() { 
    const { children, fetching, GetPrincipal } = this.props; 

    return (
     <Loader loaded={!fetching.size}> 
     <div> 
      <Header GetPrincipal={GetPrincipal} /> 
      {children} 
     </div> 
     </Loader> 
    ); 
    } 
} 

App.propTypes = { 
    GetPrincipal: PropTypes.func, 
    GetQuestionnaireSchema: PropTypes.func, 
    GetMasterDataSchema: PropTypes.func, 
    GetMasterDataData: PropTypes.func, 
    fetching: PropTypes.array 
}; 

export default connect(({ fetching }) => ({ 
    fetching 
}), { 
    GetPrincipal, 
    GetQuestionnaireSchema, 
    GetMasterDataData, 
    GetMasterDataSchema, 
})(App); 

ヘッダー

import React, { Component, PropTypes } from 'react'; 
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'; 

export default class Header extends Component { 
    componentWillMount() { 
    const { GetPrincipal } = this.props; 
    GetPrincipal(); 
    } 

    render() { 
    return (
     <Navbar fluid collapseOnSelect> 
     <Navbar.Brand> 
      <a href="/">EMS</a> 
     </Navbar.Brand> 
     </Navbar> 
    ); 
    } 
} 

Header.propTypes = { 
    GetPrincipal: PropTypes.func.isRequired 
};