Wrapper for redux to handle all boiler-plate, as DRY as the desert.


Keywords
react, redux, saga, boilerplate, remove, react-native, web, state, sagas, js, es6, gitbook, react-redux, reducer, react-saga, react-redux-boilerplate, state-props, redux-wrapper
License
MIT
Install
npm install redux-sands@1.0.4

Documentation




Redux-wrapper for React-components. As DRY as the desert: takes care of managing all boilerplate-code and lets you focus on the state-reducing functions. Supports saga-integration. Furthermore makes importing of actions/state-props from other Redux-components as simple as possible.







Quick Intro

redux-sands gives you a single class as default export, from now on called ReduxWrapper. Here's a simple example that demonstrates how you could use it:

import ReduxWrapper from "redux-sands";
import component from "./component";

// Instantiate the wrapper.
const wrapper = new ReduxWrapper({ called: "example" });

// Simply add the initial state, the component for render + a reducer.
wrapper
  .add({ initState: { count: 0 } })
  .add({ component })
  .add({ update: (state, action) => ({ ...state, ...action }) });

// Expose the redux-wrapper as any other redux-component.
export default wrapper.connection;
export const reducer = wrapper.reducer;

And now let's call it:

class Comp extends PureComponent {
  render() {
    // When using 'ReduxWrapper', only an object as param is allowed.
    // Provide your values then via that object.
    return (
      <div onClick={() => this.props.update({ count: this.props.count + 1 })}>
        Increment
      </div>
    );
  }
}

As far as basic use cases go, that's it! No more hassle with manually creating actions, mappings and endless switches. Action-types get inferred automatically, as well as the linking to the reducer. You can focus on the actual app logic without having to deal with refactoring etc.