js-redux

    2.0.0 • Public • Published

    js-redux Build Status npm version

    Redux bindings for vanilla (no-framework) javascript functions and classes

    This is a nice way to connect a function or class with Redux and associated actions + store reducers.

    For the moment, it's really simple and the main logic is < 40 lines of code. It should be easy-to-understand assuming you are already familiar with Redux. If you have ideas for use-cases that this lib doesn't currently support then just open an issue.

    Install

    npm install --save js-redux

    Provide a redux store

    When you provide a store then it is provided globally (rather than being an instance). This is simple and supports my use-cases for the moment but feel free to send a PR if you'd like to add support for multiple provided instances.

    import { createStore } from 'redux';
    import { provide } from 'js-redux';
    import rootReducer from './reducers';
     
    const initialState = [];
    const store = createStore(rootReducer, initialState);
    provide(store);

    Option 1: Function syntax

    import { connect } from 'js-redux';
    import * as todoActions from './actions'; // e.g. { addTodo, toggleTodo}
     
    function _todos(state, actions) {
      // `state` is the initial selected state (state.todos) when the function is called
      // `actions` are dispatched like this: `actions.addTodo(...)`
      return {
        updated(newState, oldState) {
          // `updated` is called when selected state has been changed (shallowEquals)
        }
      };
    }
    export const todos = connect(state => state.todos, todoActions)(_todos)
     
    // To execute your connected function just do:
    todos();

    Option 2: Class syntax

    import { connect } from 'js-redux';
    import * as todoActions from './actions';
     
    @connect(state => state.todos, todoActions)
    export class Todos {
     
      // `init` is called once when the class is initialized
      init() {
        // `this.state` is an up-to-date representation of the currently selected state
        // `this.actions` are dispatched like this: `this.actions.addTodo(...)`
      }
     
      // `updated` is called when selected state has been changed (shallowEquals)
      updated(oldState) {
        // `this.state` is the updated state. `oldState` is the previous state.
      }
    }
     
    // To init your connected class you can do either of (they both do the same thing):
    Todos();
    // or
    new Todos();

    API

    provide(store)

    Makes the Redux store available to the connect() calls below. You can’t use connect() without first providing a store for it to use. When you provide a store then it is 'provided' globally (rather than being an instance).

    Arguments

    • store (Redux Store): The single Redux store in your application.

    connect([mapStateToProps], [mapDispatchToProps])

    Connects a React component to a Redux store. The connect API looks the same as connect in react-redux but it's not, it's far more basic.

    It does not modify the class/function passed to it.
    Instead, it returns a new, connected component class, for you to use.

    Arguments

    • [mapStateToProps(state, [ownProps]): stateProps] (Function): If specified, the component will subscribe to Redux store updates. Any time it updates, updated will be called. Its result must be a plain object. It will be injected as either the first argument (for functions) — or this.state property (for classes).

    • [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object): Each function inside it will be assumed to be a Redux action creator. It injects an object with the same function names, but bound to a Redux store. It will be injected as either the second argument (for functions) — or this.action property (for classes).

    Install

    npm i js-redux

    DownloadsWeekly Downloads

    16

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    127 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar