Skip to main content

Getting Started

What is meiosis?#

Meiosis is a design pattern for managing application state using streams. Riot meiosis is an implementation of that pattern for Riot. Learn more about meiosis to understand the concept.

Key things to note#

  • Implements a stream mechanism to update state
  • Comes with a connect function to wrap stream functionality
  • Components attempt to update when updates are dispatched
  • Prevent component updates if state has not changed
  • Stream listeners are destroyed when onBeforeUnmount

Usage#

npm i --save @riot-tools/meiosis

./appState.js

import createStateStream from '@riot-tools/meiosis';
// Set your initial state.// State is only mutable via manager API.const state = {    initial: true,    isNew: true,    mutable: false,    nested: {        hasPasta: true    }};
// Root state reducerconst reducer = (newState, oldState) => ({    ...oldState,    ...newState});
// Create global app state instanceconst appState = createStateStream(state);
// Extract the state streamconst { stream } = appState;
stream.addReducer(reducer);
stream.dispatch({    initial: false,    isNew: false});
// Gets an immutable clone of the current stateconsole.log(stream.state());// > {//     initial: false,//     isNew: false,//     mutable: false,//     nested: {//         hasPasta: true//     }// }
export default appState;

In your .riot files:


<myComponent>
    <p if={ hasPasta }>I have pasta!</p>
    <script>
        import { connect } from './appState';        import myActions from './actions';
        const mapToState = (appState, ownState, ownProps) => ({            ...ownState,            ...appState.nested        });
        // Optional mapping of functions or objects to component        const mapToComponent = myActions;        // OR        const mapToComponent = (ownProps, ownState) => myActions;
        const component = {
            onBeforeMount() {
                // connect will respect original onBeforeMount                this.state = {                    lala: true                }            },
            onMounted() {
                // Component will have access to dispatch from lexical this                this.dispatch({ myComponentMounted: true });            }        }
        export default connect(mapToState)(component);        // OR        export default connect(mapToState, mapToComponent)(component);    </script></myComponent>