react-rx-flux

React binding for rxjs powered flux.

Description

react-rx-flux implements flux architecture in a way similar to react-easy-flux package, but with a small difference - it uses rxjs under the hood.

Installation

As any other npm package react-rx-flux can be added to your project by following command:

npm i -S react-rx-flux

It requires any version of rxjs and react with new context API support as peer dependency, so it should be installed as well.

npm i -S rxjs react

API

createStorage(reducer)

createStorage function creates new storage attributes such as Provider, useStorage(), useStream() and useActionCreators() hooks. You can crete several storages for different kind of data or use single storage (redux-like-way).

const {
    Provider: ThemeProvider,
    useStorage: useTheme,
    useStream: useThemeStream,
    useActionCreators: useThemeActions
} = createStorage(themeReducer);

const {
    Provider: GlobalStateProvider,
    useStorage: useGlobalState,
    useStream: useGloabalStream,
    useActionCreators: useGlobalActions
} = createStorage(globalStateRedurec);

Provider

All storage data consumers should be wrapped with Provider component, created by createStorage() function. You can pass state prop to set initial storage state.

render(
    <ThemeProvider state={ initialTheme }>
        <GlobalStorageProvider state={ initialGlobalState }>
            <App />
        </GlobalStorageProvider>
    </ThemeProvider>,
    document.getElementById('app')
);

useStorage() / useStream(pipe, checksum)

To consume/interact with storage state component should use useStorage() hook. It returns array of two elements: current state and dispatch() function to dispatch actions.

const Button = ({ ... }) => {
    const [ theme ] = useTheme();

    // use theme to set component style
};

import { setTheme } from './themeActions.js';

const ThemeSelector = ({ ... }) => {
    const [ , dipatch ] = useTheme();
    const onSelect = theme => dispatch(
        setTheme(theme)
    );

    ...
}

Until this moment react-rx-flux shows the same functionality as react-easy-flux. But as we mentioned before, it uses rxjs under the hood. To feel its advantages special useStream() hook exist. This hook allows user to create his own stream and subscribe to it from his components. In code snippet below we're implementing simple selector.

import { map } from 'rxjs/operators';

const MyComponent = () => {
    const [ value ] = useStream([
        map(
            state => state.value
        )
    ], []);

    ...
}

useStream() hook consumes two parameters:

• array of rxjs pipeable operators to genereate new stream (using Observable.prototype.pipe());
• array of values considered as stream dependencies. react-rx-flux will generate new stream each time on one of this dependencies changed.

Why this hook is so interesting? It gives us an opportunity to use all power of rxjs, so we can implement our own selector functionality as we did before, or optimize rendering by checking changes...

const [ value ] = useStream([
    map(
        ({ value }) => value
    ),
    distinct()
])

...or even apply debouncing...

const [ value ] = useStream([
    map(
        ({ search }) => search
    ),
    debounce(() => interval(500))
])

...without any significant effort.

useActionCreators(actionCreatorsMap)

To bind action creators useActionCreators() hook can be used.

import { setTheme } from './themeActions.js';

const ThemeSelector = ({ ... }) => {
    // const [ , dipatch ] = useTheme();
    // const onSelect = theme => dispatch(
    //    setTheme(theme)
    // );
    const { setTheme: onSelect } = useActionCreators({ setTheme })

    ...
}