Collection of tools for maintaining a modular Redux application
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
packages support for variadic action creators Feb 18, 2019
rollup Remove unnecessary function from rollup utils Nov 26, 2018
tests Fix enzyme in tests Nov 21, 2018
.editorconfig Fix package.json indentation Nov 2, 2018
.eslintignore Add missing tests to injectors-react Nov 5, 2018
.eslintrc.js intial setup Oct 29, 2018
.gitignore addng Vim files to .gitginore Feb 18, 2019
.huskyrc updating tests for epics Feb 14, 2019
.prettierrc Adding jest Oct 30, 2018
.travis.yml intial setup Oct 29, 2018
CHANGELOG.md Rename enhancer export to makeEnhancer Feb 13, 2019
FAQ.md
README.md Rename enhancer export to makeEnhancer Feb 13, 2019
babel.config.js intial setup Oct 29, 2018
jest.config.js Fix coverage paths Nov 26, 2018
lerna.json v0.5.0-alpha.3 Feb 15, 2019
package.json CHANGELOG v0.4.0 Feb 7, 2019
rollup.config.js Add support for injectable middleware Feb 7, 2019
yarn.lock Update dependencies and add fix for react-redux v6 Jan 9, 2019

README.md

Redux tools

A collection of Redux libraries for modular applications, such as those utilizing React-union or other SPA-in-CMS solutions. They allow you to easily:

  • tie reducers/epics/middleware to your widgets and handle their lifecycle, i.e. injection and ejection, automatically.
  • isolate your widgets' Redux state while still allowing them to communicate with one another.

They offer seamless integration with React and React-union. See the packages and the FAQ for more details!

Packages

  • actions – Functions for creating FSA-compliant action creators and reducers.
  • reducers – Redux store enhancer for asynchronous injection of reducers.
  • reducers-react – React bindings for the reducers package.
  • epics – Redux store enhancer for asynchronous injection of epics.
  • epics-react – React bindings for the epics package.
  • stream-creators – Collection of stream creators for the epics package.
  • middleware – Redux store enhancer for asynchronous injection of middleware.
  • middleware-react – React bindings for the middleware package.

The following packages are used internally and are not meant to be used directly in your application code. You might want to use them for some custom features or more advanced integration, though.

  • namespaces – Logic for associating Redux actions with a namespace.
  • injectors – Internal reusable logic for the injection mechanism itself.
  • injectors-react – Core React injector functionality.
  • utils – Various utility functions not tied to the @redux-tools domain.

Usage

This example uses React, but the tools are platform agnostic. You should already know the basics of Redux before using this library!

We will be creating a simple click counter, which will have its state stored in Redux. The catch is that we should have a variable number of isolated counters on a single page!

// duck.js
import { makeActionTypes, makeConstantActionCreator, makeReducer } from '@redux-tools/actions';

export const ActionTypes = makeActionTypes('duck', ['INCREMENT']);
export const increment = makeConstantActionCreator(ActionTypes.INCREMENT);

export default makeReducer([[ActionTypes.INCREMENT, count => count + 1]], 0);
// Counter.js
import React from 'react';
import { o } from 'ramda';
import { withReducers, namespacedConnect } from '@redux-tools/reducers-react';

import countReducer, { increment } from './duck';

const Counter = ({ count, increment }) => <button onClick={increment}>{count}</button>;

const mapStateToProps = namespacedState => ({ count: namespacedState.count });
const mapDispatchToProps = { increment };

const enhance = o(
	withReducers({ count: countReducer }), // This handles the asynchronous reducer injection.
	namespacedConnect(mapStateToProps, mapDispatchToProps) // This is just like `connect` from react-redux
);

export default enhance(Counter);
// index.js
import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { makeEnhancer as makeReducersEnhancer } from '@redux-tools/reducers';
import { Provider } from '@redux-tools/reducers-react';
import { identity } from 'ramda';

import Counter from './Counter';

// `makeReducersEnhancer()` is an enhancer just like `applyMiddleware()`, so they're composable!
const store = createStore(identity, makeReducersEnhancer());

render(
	<Provider store={store}>
		<Counter namespace="foo" />
		<Counter namespace="bar" />
		<Counter namespace="baz" />
	</Provider>,
	document.getElementById('root')
);

And that's it!

Resources

Related projects