Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
redux-injectors
Advanced tools
Dynamically load redux reducers and redux-saga sagas as needed, instead of loading them all upfront. This has some nice benefits, such as avoiding having to manage a big global list of reducers and sagas. It also allows more effective use of code-splitting. See motivation. As used by react-boilerplate.
npm install redux-injectors # (or yarn add redux-injectors)
The redux store needs to be configured to allow this library to work. The library exports a store enhancer that can be passed to the createStore
function.
import { createStore } from "redux";
import { createInjectorsEnhancer } from "redux-injectors";
const store = createStore(
createReducer(),
initialState,
createInjectorsEnhancer({
createReducer,
runSaga,
})
)
Note the createInjectorsEnhancer
function takes two options. createReducer
should be a function that when called will return the root reducer. It's passed the injected reducers as an object of key-reducer pairs.
function createReducer(injectedReducers = {}) {
const rootReducer = combineReducers({
...injectedReducers,
// other non-injected reducers can go here...
});
return rootReducer
}
runSaga
should usually be sagaMiddleware.run
.
const runSaga = sagaMiddleware.run;
If you're using redux devtools, it's important to set shouldHotReload
to false. This is because otherwise, redux devtools will re-dispatch previous actions when reducers are injected, causing unexpected behavior.
If using redux-toolkit:
const store = configureStore({
devTools: {
shouldHotReload: false
}
})
If not using redux-toolkit:
import { composeWithDevTools } from 'redux-devtools-extension';
const composeEnhancers = composeWithDevTools({
shouldHotReload: false
});
const store = createStore(reducer, composeEnhancers(
...
));
Unfortunately this causes a separate issue where the action history is cleared when a reducer is injected, but it's still strongly recommended to set shouldHotReload
to false. There's an open issue in the redux-devtools repo about this.
After setting up the store, you will be able to start injecting reducers and sagas.
import { compose } from "redux";
import { injectReducer, injectSaga } from "redux-injectors";
class BooksManager extends React.PureComponent {
render() {
return null;
}
}
export default compose(
injectReducer({ key: "books", reducer: booksReducer }),
injectSaga({ key: "books", saga: booksSaga })
)(BooksManager);
Or, using hooks:
import { useInjectReducer, useInjectSaga } from "redux-injectors";
export default function BooksManager() {
useInjectReducer({ key: "books", reducer: booksReducer });
useInjectSaga({ key: "books", saga: booksSaga });
return null;
}
Note: while the above usage should work in most cases, you might find your reducers/sagas aren't being injected in time to receive an action. This can happen, for example, if you dispatch an action inside a useLayoutEffect
instead of a useEffect
. In that case, useInjectReducer
and useInjectSaga
return boolean flags that are true
once the reducers/sagas have finished injecting. You can check these before rendering children that depend on these reducers/sagas being injected.
import { useInjectReducer, useInjectSaga } from "redux-injectors";
export default function BooksManager(props) {
const reducerInjected = useInjectReducer({ key: "books", reducer: booksReducer });
const sagaInjected = useInjectSaga({ key: "books", saga: booksSaga });
if (!reducerInjected || !sagaInjected) {
return null;
}
return (
<>
{props.children}
</>
);
}
See the API reference
Or the example
There's a few reasons why you might not want to load all your reducers and sagas upfront:
FAQs
Unknown package
The npm package redux-injectors receives a total of 8,856 weekly downloads. As such, redux-injectors popularity was classified as popular.
We found that redux-injectors demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.