randallknutson / redux-injector Goto Github PK

Great job on redux-injector. Super useful. Here's an idea for a utility function to dynamically add reducers on the fly. I was shocked at how simple this was to do.

//used in conjunction with redux-injector
//given a plain object: reducer = {}
//the reducer factory enables adding reducer functions dynamically

export function ReducerFactory(initialStoreState, reducer) {
    return function reducerFunction(state = initialStoreState, action) {
        if (reducer[action.type]) {
            return reducer[action.type](state, action);
        } else {
            return state
        }
    }
}

/*EXAMPLE USE

import { ReducerFactory } from './reducerFactory'
import { injectReducer } from './redux-injector';

createReducers(propsID, initialStoreState) {
    reducer = {};
    injectReducer(propsID, ReducerFactory(initialStoreState, reducer));

    this.reducer[`${propsID}_SUCCESS`] = (state, action) => {
        return Object.assign({}, state, { error: null, isPending: false })
    }
    this.reducer[`${propsID}_PENDING`] = (state, action) => {
        return Object.assign({}, state, { isPending: true });
    }}
    this.reducer[`${propsID}_SUCCESS`] = (state, action) => {
        return Object.assign({}, state, { error: null, isPending: false, payload: action.payload })
    }
}
*/

We use this package in development and production. I wonder if it is possible to use this together with Redux Devtools somehow?

I've tried passing composeEnhancers() to the createInjectStore() function, and it seems to work initially, but then Redux Devtools crashes.

Thank you for creating this package, it has been very useful to us.

if i need isomorphic , how i do ? 😂

Hey there,

Thanks for this amazing lib, and especially the recursive reducer injection 🎉

I'm using redux-sagas too, and I've created a lib for loading sagas asynchronously, it uses redux-injector as a dependency for creating the store.

It can be found here: https://github.com/GuillaumeCisco/redux-sagas-injector

An exemple is available in the README 🍾

Hey there,

I see in the source code:

export function injectReducer(key, reducer, force = false) {
  // If already set, do nothing.
  if (has(store.injectedReducers, key) || force) return;

  set(store.injectedReducers, key, reducer);
  store.replaceReducer(combineReducersRecurse(store.injectedReducers));
}

What is the purpose of the force parameter?
If injectedReducers has the reducer key, it won't replace it
If we force it by settings force to true, it won't replace it either.

Should not the force parameter set to true replace the reducer even if injectedReducers has it?

If you want to write a Redux store setup library module to be used in multiple applications, then it would make sense to support creating it without initial reducers. Currently you must provide at least on dummy no-op reducer.

Implementation proposal: when initialReducers is falsy then a no-op reducer is installed.

function combineReducersRecurse(reducers) {
  // leaf provides no reducer, use a no-op reducer
  if (!reducers) {
    return () => ({});
  }
  ...
}

export function createInjectStore(initialReducers, ...args) {
  ...
  store.injectedReducers = initialReducers || {};

  return store;
}

How do i call replaceReducer on the store with this library?

Would it not be possible to make the injection work with the store that is on context? That way, this works with server-side rendering. So there'd be a decorator that you pass the reducer to and it injects it on Redux…

I am trying to reset my store using the method shown here -> https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store