Redux state like local component state.
this.setState()
to update Redux stateconnectAdvanced()
primitive of
React Redux 5.0 and implements the same optimizations as connect()
import {connectLean} from "lean-redux";
var Counter = ({count, handleClick}) => (
<div>
{count} <button onClick={handleClick}>+1</button>
</div>
);
Counter = connectLean({
getInitialState() {
return {count: 0};
},
handleClick(e) {
e.preventDefault();
this.setState({count: this.state.count + 1});
},
})(Counter);
// Scope it to a myCounter key in the Redux state
// <Counter scope="myCounter" />
To learn more checkout the live examples.
yarn add lean-redux
or
npm install --save lean-redux
Just add the leanReducer
to your store and start creating components with
connectLean
.
import {createStore, applyMiddleware} from "redux";
import {Provider} from "react-redux";
import {leanReducer} from "lean-redux";
const store = createStore(leanReducer);
var Main = () => (
<Provider store={store}>
<Counter />
</Provider>
);
ReactDOM.render(<Main />, document.getElementById("app"));
If you already have other reducers you can merge leanReducer
into them with
the composeReducers
helper:
import {leanReducer, composeReducers} from "lean-redux";
const store = createStore(composeReducers(myReducer, myAnotherReducer, leanReducer));
Checkout the index.js in examples for complete example.
combineReducers
helperThe combineReducers
helper function does not like dynamically generated top
level state keys so Lean Redux must be scoped under a specific key in the Redux
state when used with the combineReducers
helper.
import {createStore, combineReducers} from "redux";
import {leanReducer} from "lean-redux";
leanReducer.setGlobalScope("lean");
const store = createStore(combineReducers({
lean: leanReducer
}));
Functions exported by the lean-redux
module.
connectLean(options: Object): (component: ReactComponent) => ReactComponent
Connects a React component to a Redux store. Like connect()
in React Redux it
does not modify the component but returns a new one.
options
scope: string|Array|Function
Scope the component to a part of the Redux
state. Deep scopes can be defined with arrays. Missing path values in the
state will be automatically created as objects. If the value is a function it
should return the final scope. Parent component props are passed to the
function. If scope
is passed as a prop from the parent component it will
override the value defined here unless it's a function.getInitialState(): Object
Create default values for the scoped state. Like
React component getInitialState()
this is executed only once when the
component is mounted.mapState(state: Object, ownProps: Object): Object
Modify the state before
passing it to the wrapped component. Just like the mapStateToProps
in React
Redux, but the state is scoped according to the scope
option. If not
defined the default implementation is to return the props matching what
getInitialState()
returns.defaultProps: Object
Default props for the handler context.Any other methods are considered to be "handlers" and are passed to the wrapped component as props.
handlerContext
The context, this
, in the handlers is like in the React Components.
this.state: Object
The current scoped state from Reduxthis.props: Object
Props from defaultProps
and any additional props passed by
the parent component.this.setState(function|object nextState, [function callback])
Function to
update the scoped Redux state. The API is exactly the same with the React
Component setState()
.this.dispatch: Function
Redux store dispatch