এটি আমি বর্তমান অ্যাপে এভাবে প্রয়োগ করেছি (একটি গিটহাব ইস্যু থেকে ড্যানের কোডের ভিত্তিতে!)
// Based on https://github.com/rackt/redux/issues/37#issue-85098222
class ReducerRegistry {
constructor(initialReducers = {}) {
this._reducers = {...initialReducers}
this._emitChange = null
}
register(newReducers) {
this._reducers = {...this._reducers, ...newReducers}
if (this._emitChange != null) {
this._emitChange(this.getReducers())
}
}
getReducers() {
return {...this._reducers}
}
setChangeListener(listener) {
if (this._emitChange != null) {
throw new Error('Can only set the listener for a ReducerRegistry once.')
}
this._emitChange = listener
}
}
আপনার অ্যাপ্লিকেশন বুটস্ট্র্যাপ করার সময় একটি এন্ট্রি বান্ডেল অন্তর্ভুক্ত করা হবে যারা হ্রাসকারীগুলিতে পাস করার সময় একটি রেজিস্ট্রি উদাহরণ তৈরি করুন:
// coreReducers is a {name: function} Object
var coreReducers = require('./reducers/core')
var reducerRegistry = new ReducerRegistry(coreReducers)
তারপরে স্টোর এবং রুটগুলি কনফিগার করার সময় কোনও ফাংশন ব্যবহার করুন যা আপনি হ্রাসকারীর রেজিস্ট্রি দিতে পারেন:
var routes = createRoutes(reducerRegistry)
var store = createStore(reducerRegistry)
যেখানে এই ফাংশনগুলি দেখতে এমন কিছু দেখাচ্ছে:
function createRoutes(reducerRegistry) {
return <Route path="/" component={App}>
<Route path="core" component={Core}/>
<Route path="async" getComponent={(location, cb) => {
require.ensure([], require => {
reducerRegistry.register({async: require('./reducers/async')})
cb(null, require('./screens/Async'))
})
}}/>
</Route>
}
function createStore(reducerRegistry) {
var rootReducer = createReducer(reducerRegistry.getReducers())
var store = createStore(rootReducer)
reducerRegistry.setChangeListener((reducers) => {
store.replaceReducer(createReducer(reducers))
})
return store
}
এখানে একটি বেসিক লাইভ উদাহরণ যা এই সেটআপটি দিয়ে তৈরি করা হয়েছিল এবং এর উত্স:
এটি আপনার সমস্ত হ্রাসকারীদের জন্য গরম পুনরায় লোডিং সক্ষম করার জন্য প্রয়োজনীয় কনফিগারেশনটিও কভার করে।