React helpers for minska.
yarn add minska-react
The packages includes ES modules for Webpack 2 and Rollup, CommonJS modules for Node > 6, and Browser modules.
You can also access the files on unpkg where you can link them directly in a <script>
tag and have window.MinskaReact
available in global scope. The browser builds are compiled minska-react.js
and minska-react.min.js
.
See minska to see how to set up a store and how it works.
minska-react
exports <Provider>
and connect()
. They work in a similar fashion to react-redux
in that the Provider
component passes it's store
prop as context, and connect
ed components hook into the store to provide the state to the components they wrap.
You first wrap your app component, or anything that might want access to the store in a <Provider>
. Important: You should only have a single Provider
in your app.
You give it a single prop: store
. This should be an instance of a minska
store. All Provider
does is make the store instance available in context. You shouldn't interact with the store instance directly—instead use connect()
(explained below).
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'minska-react';
import store from './store';
import MyApp from './MyApp';
render(
<Provider store={store}>
// If `MyApp` is a connected component,
// it will have access to the store
<MyApp />
</Provider>,
document.getElementById('app')
);
Connecting a component passes the stores current state as props, along with the send
function allowing the connected component to change the state.
In a similar fashion to react-redux
, you can also choose what part of the state is passed to the connected component as props. Simply pass a function to connect that returns a slice of the state. Only that slice will be passed on as props instead of the whole state tree.
import React from 'react';
import { connect } from 'minska-react';
const MyApp = ({ count, send }) => {
const onClick = () => {
send('incrementBy', 1);
}
return (
<div>
<h1>Current count: {count}</h1>
<button onClick={onClick}>+ 1</button>
</div>
);
};
// Given the state: `{ count: 1, foo: 'bar' }`
const mapStateToProps = (state, ownProps) => {
// You also have access to the components original props with `ownProps`
return { count: state.count };
};
// Then `MyApp` will only be given `count` and `send` as props
export default connect(mapStateToProps)(MyApp);