प्रतिक्रिया होती है। आलसी लोडिंग

शुभ दिन।

मैं रिएक्ट और रेडक्स पर एक परियोजना विकसित कर रहा हूं। मैं इस लेख में अपनी परियोजना की वास्तुकला का वर्णन करना चाहता हूं।

तो चलिए शुरू करते हैं। फ़ाइल संरचना:



Reducers कनेक्ट करने के लिए, एक सिंगलटन reducerRegister क्लास बनाएँ:

./reducerRegister.js

class ReducerRegistry { constructor () { if (!ReducerRegistry.instance) { this._emitChange = null this._reducers = {} ReducerRegistry.instance = this } return ReducerRegistry.instance } getReducers () { return {...this._reducers} } register (name, reducer) { this._reducers = {...this._reducers, [name]: reducer} if (this._emitChange) { this._emitChange(this.getReducers()) } } setChangeListener (listner) { this._emitChange = listner } } const reducerRegistry = new ReducerRegistry() export default reducerRegistry 

इस वर्ग के साथ, reducers खुद को स्टोर में पंजीकृत कर सकते हैं।

एक स्टोर बनाएँ:

./configureStore

 export default function configureStore (initialState) { const combine = (reducers) => { const reducerNames = Object.keys(reducers) Object.keys(initialState).forEach(item => { if (reducerNames.indexOf(item) === -1) { reducers[item] = (state = null) => state } }) reducers['router'] = connectRouter(history) return combineReducers(reducers) } const reducer = combine(reducerRegistry.getReducers()) const store = createStore(reducer, initialState, compose(composeWithDevTools(applyMiddleware(thunk)), applyMiddleware(routerMiddleware(history)))) reducerRegistry.setChangeListener(reducers => { store.replaceReducer(combine(reducers)) }) return store } 

Store.replaceReducer फ़ंक्शन का उपयोग करके, स्टोर में रीड्यूसर लोड करें।

मुख्य फ़ाइल

मार्गों को जोड़ें और Redux कनेक्ट करें

./index.js

 const Cabinet = React.lazy(() => import('./moduleCabinet/Index')) let store = configureStore({ profile: {loading: null} }) class App extends Component { render () { const history = createBrowserHistory() return ( <Router basename="/"> <ConnectedRouter history={history}> <Suspense fallback={<Loader/>}> <Switch> <Route exact path="/" component={Main} /> <Route path="/admin" render={(props) => <RouteAdmin {...props} />}/> <Route path="/cabinet" component={props => <Cabinet {...props} />}}/> <Route path="/" component={() => <div>page not found</div>} /> </Switch> </Suspense> </ConnectedRouter> </Router> ) } } if (document.getElementById('app')) { ReactDOM.render( <Provider store={store}> <App/> </Provider>, document.getElementById('app') ) } 

React.lazy का उपयोग करके हम घटकों का आलसी लोडिंग बनाते हैं। React.lazy 16.6 संस्करण से शुरू होता है । आलसी लोडिंग। सस्पेंस तत्व घटक लोडिंग को संभाल रहा है।

AdminModule केवल एक अधिकृत उपयोगकर्ता द्वारा डाउनलोड किया जा सकता है, इसके लिए हम RouteAdmin घटक का उपयोग करते हैं:

./RouteAdmin.js

 const NotAccess = (props) => { return ( <div> <h1 className="text-danger"> </h1> </div> ) } export default class RouteAdmin extends Component { constructor (props) { super(props) this.state = { component: null } } componentDidMount () { axios.post('/admin').then(data => data.data).then(data => { if (data.auth === true) { const Admin = React.lazy(() => import('./moduleAdmin/Index')) this.setState({component: Admin}) } else { this.setState({component: NotAccess}) } }) } render () { const Component = this.state.component return ( <Route path="/admin" {...this.props} render={this.state.component}/> ) } } 

मॉड्यूल कार्यान्वयन

मुख्य फ़ाइल - मॉड्यूल मार्गों को जोड़ें

./moduleAdmin/Index.js

 export default class IndexComponent extends Component { constructor (props) { super(props) } render () { return ( <> <Route to="/admin/Profiles" component={Profiles} /> ... </> ) } } 

./moduleAdmin/pages/Profiles.js

 class Profiles extends Component { componentDidMount() { this.props.getInfo() } render() { if (this.props.loading === Process.Start) { return <Loader /> } if (this.props.loading === Process.Success) { return ( <div> <h1>Profiles</h1> </div> ) } return null } } const mapStateToProps = (state) => { return { loading: state.profiles.loading } } const mapDispatchToProps = (dispatch) => { return { getInfo: () => dispatch(getInfo()) } } export default connect( mapStateToProps, mapDispatchToProps )(Profiles) 

एक reducer बनाएँ

हम तुरंत इसे स्टोर में पंजीकृत करते हैं:

./moduleAdmin/redux/profile.js

 const Process = { Start: 0, Success: 1, Error: 2 } export const getInfo = () => { return (dispatch) => { dispatch({ type: PROFILES_GET_START }) axios.post('/news').then((data) => { dispatch({ type: PROFILES_GET_SUCCESS, payload: data.data }) }).catch(e => { dispatch({ type: PROFILES_GET_ERROR, payload: e }) }) } } const initialState = { error: null, loading: null, data: null } const reducer = (state = initialState, action) => { switch (action.type) { case PROFILES_GET_START: { return { ...state, loading: Process.Start } } case PROFILES_GET_SUCCESS: { return { ...state, loading: Process.Success, data: action.payload} } case PROFILES_GET_ERROR: { return { ...state, loading: Process.Error, error: action.payload } } default: { return state } } } reducerRegistry.register('profiles', reducer) 

मुझे उम्मीद है कि मेरा लेख आपकी परियोजना के कार्यान्वयन में मदद करेगा, और आपकी टिप्पणी मेरा सुधार करने में मदद करेगी।