Aktion rekursiv in meiner Middleware beim Datenabruf

Question

Ich habe Komponente App, die ihre Kinder und Header-Komponente rendern. Ich benutze Preloader von react-loader Repo, die Bool geladen und Render Preloader oder Seite abhängig von bool. Wenn App componentWillMount, holen Daten über actionCreators, Aktion Verwendung redux-api-Middleware, dann, wenn ausführen in App holen Daten über actionCreator boundGetPhotos, Kopf die rekursiv PHOTOS_GET_SUCCESS in console screenshot hier ausführen machen i log action.type in meinem fetchingMiddleware. Alle Aktionen gehen von meiner Middleware fetchingMiddleware aus. Welche Gründe der rekursiven Verhalten sein kann, warum es wieder ausführen und wieder und wie ich es

App lösen kann

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

Kopf

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

Ihre <Header /> co Die Komponente sollte eine reine Komponente sein, die nichts über Ihren Statuscontainer (Redux) oder den Versand weiß.

Mit dem Ansatz, den Sie hier haben, würde Ihr Komponentenbaum mit 'connect' verwaschen und allen Ihren Komponenten das Bewusstsein für Redux geben. Dies ist eine schlechte Skalierbarkeit - was ist, wenn Sie Redux durch einen anderen Statuscontainer ersetzen möchten?

Ich würde empfehlen, dass alle Status und Aktionen an Requisiten gebunden sein und den Baum in Ihre Komponenten wie die <Header /> Komponente weitergegeben werden sollten.

Dies sollte auch die Probleme lösen, die Sie haben.

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

Kopf

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