數據提取時在我的中間件中遞歸調用

Question

我有組件應用程序呈現其子代和Header組件。我使用Preloader從反應加載程序回購這需要bool加載和渲染預加載器或頁面依賴於布爾。當App componentWillMount，數據通過actionCreators取，動作使用終極版的API中間件，那麼當執行渲染在應用，頭通過actionCreator獲取數據boundGetPhotos其執行遞歸看PHOTOS_GET_SUCCESS在console screenshot這裏我登錄action.type在我的fetchingMiddleware。所有操作都從我的中間件中取出中間件看下面。這可能是爲什麼它一次又一次地執行遞歸行爲的原因，我該如何解決呢

應用

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）或派發一無所知。

使用你在這裏的方法會使用'connect'拋棄你的組件樹，並增加Redux對所有組件的認識。就可伸縮性而言，這是不好的做法 - 如果您想將Redux替換爲另一個狀態容器，該怎麼辦？

我會建議所有狀態和動作都應該綁定到道具上，並傳遞到您的組件中，例如<Header />組件。

這也應該解決您遇到的問題。

應用

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