import

Simply add state and/or reducers from other redux-components in one line.

Note: Currently only works when importing from other redux-sands-wrappers. A future release will allow to import any action and state.

redux-sands also provides a clean and easy way to import other states and reducers.

reducer

import({ reducer: { [wrapperName]: ["reducerName", "reducerName"] }})

Import other plain reducers by first using the key reducer, which holds an object of tuples containing the wrapper's name and an array of the reducer's names.

// Example:

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

const wrapper = new ReduxWrapper({ called: "wrapper", component });

wrapper.import({ reducer: { account: ["add", "remove"] }})

// ...
export const saga = wrapper.saga

When importing reducers, you have to hook up the saga-export to the saga-middleware in your app. Else the action won't get fired.

If you don't have it installed yet, here's the project.

Importing a saga-reducer

When importing a reducer that uses saga, the import changes slightly. Instead of simply using a string to identify the reducer, an object has to be passed to the array containing the reducer-names as origin as well as the bool withSaga to true.

// Example:
// ...

wrapper.import({ reducer: { account: [{ origin: "add", withSaga: true}] }})

// ...
export const saga = wrapper.saga

Behind the scenes

redux-sands internally uses proxies to import reducers from other comps. This is necessary b/c we can't guarantee that the component we're importing from has already been instantiated. Therefore, when an import is declared, the wrapper instance creates a unique proxy for that action. Upon calling, this proxy gets fired, which itself fires saga to dispatch the actual action.

This race-condition doesn't occur when statically importing the reducers to your store. But since we're working here at runtime, redux may not find the other's reducer during its init, since it hasn't been created yet.

Saga is necessary, b/c dispatching actions in other reducers is a non-pattern. Hence we're dispatching the requested action as a controlled side effect via saga.

state

import({ state: { [wrapperName]: ["stateProp", "stateProp"] }})

Import oter state props. Works like importing other reducers.

Renaming

You're not limited to import them 'as-is'. Every reducer/state-prop can be renamed by simply replacing the string-definition with an object: { origin: "originalName", as: "customNameInThisWrapper" }.

// Example:

//... 

wrapper.import({ reducer: {
  account: [{ origin: "add", as: "addAccount" }, 
            { origin: "remove", as: "removeAccount" }]
  }})