easy-redux-helpers is a tiny lib that eliminates most boilerplate when:
- creating reducers (by leveraging immer)
- connecting components to redux
// in your reducers
import { createReducer } from "easy-redux-helpers";
const config = {
// first set initial state
initialState: {
counter: 0
},
// declare the reducer for each action
// create a new state by modifying the previous, no need to return new state
INCREMENT: (state, action) => {
state.counter = state.counter + action.payload.amount;
},
DECREMENT: (state, action) => {
state.counter = state.counter - action.payload.amount;
}
};
reducer = createReducer(config);
The state returned by reducers created using createReducer
is immutable (immer does the hard work)
// when connecting components to redux
import React from "react";
import { connect } from "easy-redux-helpers";
import increment from "./actions";
class MyComponent extends from React.Component {
// can use props as
// this.props.title
// can use actions as
// this.props.actions.increment()
}
export default connect(MyComponent).to({
props: {
title: "state.info.name", // you can use dot notation to get data from the state
total: getTotal // you can use selectors
},
actions: {
increment // receives action creators
}
})
// increment is defined at actions.js as
// export const increment = () => ({type: "INCREMENT"})
connect
props
can also be a function, for example:
export default connect(MyComponent).to({
props: (state, props) => ({
title: state.title.toUpperCase(),
total: props.todos.length
})
});
yarn install easy-redux-helpers
or
npm install easy-redux-helpers
Chances are, you're already using react-redux
, which this lib uses as a peerDependency. In case you're not, you should install it too:
yarn install react-redux
or
npm install react-redux
Special thanks to Grability and it's React Native team that helped in the making of this lib