inferno-redux
v8.2.3
Published
Official Inferno bindings for Redux
Downloads
350
Readme
inferno-redux
Inferno Redux is a redux library for Inferno.
Inferno Redux passes context.store
value to each component.
Install
npm install inferno-redux
Contents
- Provider
- connect
Usage
Usage of inferno-redux
is similar to that of react-redux.
Inspiration was taken from react-redux
to provide Inferno with a similar API.
import { render } from 'inferno';
import { Router, Route, browserHistory } from 'inferno-router';
import { Provider } from 'inferno-redux';
import { createStore } from 'redux';
const store = createStore(function(state, action) {
switch (action.type) {
case 'CHANGE_NAME':
return {
name: action.name
};
default:
return {
name: 'TOM'
};
}
})
class App extends Component {
render() {
return <div>
{ this.props.children }
</div>;
}
}
class BasicComponent1 extends Component {
render() {
const store = this.context.store;
const state = store.getState();
const onClick = e => {
e.preventDefault();
store.dispatch({
type: 'CHANGE_NAME',
name: 'Jerry'
});
};
return (
<div className="basic">
<a id="dispatch" onClick={ onClick }>
<span>Hello { state.name || 'Tom' }</span>
</a>
</div>
);
}
}
class BasicComponent2 extends Component {
render() {
const store = this.context.store;
const state = store.getState();
return (
<div className="basic2">
{ state.name === 'Jerry' ? 'You\'re a mouse!' : 'You\'re a cat!' }
</div>
);
}
}
render((
<Provider store={ store }>
<Router history={ browserHistory } component={ App }>
<Route path='/next' component={ BasicComponent2 } />
<Route path='/' component={ BasicComponent1 } />
</Router>
</Provider>
), container);