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.
An opinionated version of redux for fast prototyping. No action types, no reducers with switch cases. But still redux is used internally.
npm install --save lazy-redux
Action and reducer definitions are passed to createStore
function to populate reducers internally,
import {createStore} from 'lazy-redux';
import * as actions from 'my/path/to/actions';
const reducerDefinitions = {
ui : { loading: false, isLeftPanelOpen: false } // <reducer-name> : <initial-state>
...
...
};
const store = createStore(reducerDefinitions, actions /* ,middleswares, enhancer */);
let root = <Provider store={store}><App/></Provider>;
Actions should return a function (normal function, async function or generator function) with two parameter. First parameter is the object whose keys are reducer names and values are the setter funtion. Second one is the classical getState param of thunk middleware. An example of action.js is as follows.
export function setUILoading(isLoading){
return ({ui}, getState) => {
ui.set({loading: isLoading});
}
}
Or async functions like
export function getUsers(){
return async function({ui, users}, getState){
ui.set({loading: true});
let users = await api.get('example.com/users'); // api.get function is assumed to be a promise.
users.set(users);
ui.set({loading:false});
}
}
or generator function
export function getUsers(){
return function* ({ui, users}, getState){
ui.set({loading: true});
let users = yield api.get('example.com/users');
...
}
}
For the example above, actually there is a reducer named 'ui' (which you defined at createStore stage)generated by lazy-redux and a set function is defined for every reducer to set the new state. You can access any reducer setter from the first param of the returning function.
Simplified connect function of react-redux
. No mapDispatchToProps
function required. The actions are passed to component props as actions
. mapStateToProps
is simplified to an array of reducer names.
import React, { Component } from 'react';
import { connect } from 'lazy-redux';
class MyComponent extends Component {
render() {
return (
<div>
{this.props.ui.loading ? 'loading...' : 'ready!'}
<button onClick={()=> {this.props.actions.getUsers(); }}>load</button>
</div>
);
}
}
// actions are mapped to "this.props.actions" by default
// an array of reducers to be mapped to props are passed to connect function
export default connect(['ui'])(MyComponent);
FAQs
Opinionated version of Redux, no action types and switch cases
The npm package lazy-redux receives a total of 1 weekly downloads. As such, lazy-redux popularity was classified as not popular.
We found that lazy-redux demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.