1.0.1 • Published 5 years ago
react-redux-mapper v1.0.1
React-redux Action & State mapper
React-redux Action & State mapper is a lightweight lib for mapping state and actions for a component with ease. WARNING! I've developed this for my own project and it serves me well so far. Report any bugs you find please!
INSTALLING
npm i react-redux-mapper
HOW TO USE:
ACTION MAPPING:
import React from "react";
import { connect } from "react-redux";
import { actionMapper } from "react-redux-mapper";
import * as actions from "path_to_action_factory";
/*
Here we assume that imported action factory is an object with the following structure:
{
actionName: func(),
actionName2: func(),
...etc
}
*/
const mapToAction = actionMapper(actions); // Will make available all the actions from imported actions
const mapToAction = actionMapper(actions, [actionNames]); // Will make available only the specified keys
class SomeComponent extends React.Component {
/*CLASS BODY*/
}
const Comp = connect(null, mapToAction)(SomeComponent);
export default Comp;
STATE MAPPING
import React from "react";
import { connect } from "react-redux";
import { stateMapper } from "react-redux-mapper";
import * as actions from "path_to_action_factory";
const mapState = stateMapper(); // Maps entire state with all available keys
const mapState = stateMapper(arrayOfKeysToMap); // Maps only specified keys
const mapState = stateMapper('keyName', getter?); // Maps only one key, with specific getter if passed, all getters have the same syntax - see bellow;
const mapState = stateMapper({
stateKey: null,
stateKey: 'nameForProp',
stateKey: {
name?: newNameForProp,
getter?: getter(val, state) => {}
}
});
// EVERY GETTER IS A FUNCTION THAT RECIEVES 2 ARGUMENTS - value of a state with current key and entire state, and must return a value:
// getter: (value, state) => value * 10
class SomeComponent extends React.Component {
/*CLASS BODY*/
}
const Comp = connect(mapState)(SomeComponent);
export default Comp;