Wedux

Like Redux + React-Redux, but tiny :)

• Features
• Installation
• Usage
  • createUniqueStore
• Thanks

Features

• Zero dependencies!
• Super tiny, at ~1.5KB gzipped
• Perfect for library use

Installation

Add wedux to your project via npm install:

npm install --save @helpscout/wedux

Usage

Out of the box, Wedux works just like Unistore:

import createStore, { Provider, connect } from '@helpscout/wedux'

createUniqueStore

This is a special feature that allows you to create stores (with associating Provider/connect components) with guaranteed unique store keys. This is important if you plan on creating multiple nested stores. This is especially good for libraries, as it guarantees that the library's Wedux components don't clash with the integrated application Wedux components.

createUniqueStore(reducer, enhancer, namespace)

| Argument | Type | Description | | --------- | ------------------- | ---------------------------------------------------------------------- | | reducer | Object/Function | Reducer/initialState for the store. | | enhancer | Object | Store enhancer, like applyMiddleware. | | namespace | string | A custom namespace for the store (context). It will still be unique. |

Example

import { createUniqueStore } from '@helpscout/wedux'

const libStore = createUniqueStore()
const appStore = createUniqueStore()

const Bob = ({ makeBurger }) => (
  <button onClick={makeBurger}>Make Burger</button>
)

const makeBurger = store => {
  return {
    didMakeBurgers: !store.didMakeBurgers,
  }
}

const ConnectedBob = libStore.connect(null, { makeBurger })(Bob)

class App extends React.Component {
  render() {
    return (
      <appStore.Provider>
        <div>
          ...
          <libStore.Provider>
            <ConnectedBob />
          </libStore.Provider>
          ...
        </div>
      </appStore.Provider>
    )
  }
}

Thanks

Thanks to developit for creating Unistore, which this library is based on. And of course, the lovely folks at Redux.