Awesome
redux-mobx-connect
yarn add redux-mobx-connect
A simple alternative to react-redux
react-redux is a remarkable piece of battle-tested engineering with a work-of-art API. This... is not that.
This is a so-simple-it's-almost-dumb connector for redux stores which uses MobX to hook stuff together. The API is obvious and boring, and you'll be yawning all the way to the bank.
This
import {connect} from "react-redux"
const ConnectedComponent = connect(
null,
(dispatch, {id}) => ({onPress: () => dispatch(somethingHappened(id))})
)(Component)
becomes this:
import {connect} from "redux-mobx-connect"
const ConnectedComponent = connect(store => ({id}) =>
<Component onPress={() => store.dispatch(somethingHappened(id))}>
)
And this (from redux docs):
const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
const mapDispatchToProps = dispatch => {
return {
onTodoClick: id => {
dispatch(toggleTodo(id))
}
}
}
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
becomes this:
const VisibleTodoList = connect(
store =>
class VisibleTodoList extends React.Component {
onTodoClick = id => store.dispatch(toggleTodo(id))
render() {
const todos = getVisibleTodos(store.state.todos, store.state.visibilityFilter)
return (
<TodoList todos={todos} onTodoClick={this.onTodoClick} />
)
}
},
)
Usage
Provider
takes a single prop, store
which should be the redux store. Wrap your app in this, just like for react-redux.
connect
takes a function which is passed a reactive store object, and can return either a stateless functional component or a es6 component class. So you write your connected components just like your
regular components, except wrapped in a lexical context where they have access to your redux store.
Yes it really is that simple. The only real gotcha is that you can't destructure the store outside of the inner class or functional component.
e.g.
BAD:
const VisibleTodoList = connect(
({state, dispatch}) =>
class VisibleTodoList extends React.Component { ... },
)
GOOD:
const VisibleTodoList = connect(
store => class VisibleTodoList extends React.Component { ... },
)
Doing it the bad way means you lose the reactivity goodness that MobX sets up for you, and state changes won't be propagated from store to component.
Advanced Usage
Use makeConnect
to create a project-specific version of connect so you don't need to
specify the types of your store state and actions everywhere.
Since redux-mobx-connect is built on MobX you can
even use @observable
and @computed
properties in your connected components to
manage component local state and memoize expensive derived state. No more reselect!
This is being used in production by Futurice
License
MIT