madmax983 / lightning-redux

Lightning Components and Redux: A Predictable State Container for Lightning Apps

Lightning-Redux

Redux bindings for the Lightning Component Framework

Usage

The new version of Lightning-Redux simplifies the previous iteration down to a single Redux component. It serves as a wrapper around Redux itself, along with a few helper methods specific to Lightning. It has one attribute to specify, which is the name of the store you would like to create. This name defaults to "redux" if no name is specified.

Component Methods

createStore(name, reducer, initialState, middleware): create the Redux store.

name: The name of the slice of state for the reducer creating the store.

reducer: Initial root reducer

initialState: You can specify an initial shape to your store's shape.

middleware: You can include redux middleware like redux-thunk here. Lightning-Redux automatically wraps this with Redux compose.

dispatch(action): Works like you would expect. Dispatches the action to the Redux store. Fun fact: connect also sets a dispatch expando on the connected component for convenience.

subscribe(listener): This shouldn't be needed to be implemented, but is provided in case you want to write a custom connect method. The listener callback will be called on store updates.

replaceReducer(nextReducer): Wraps Redux's replaceReducer function. Replaces the reducer function in the redux store.

registerReducer(name, reducer): Adds the specified reducer function to the redux store with the specificed name as it's slice of state.

connect(mapStateToAttributes, target): mapStateToAttributes either a key pair object where the key is the attribute on the component you want set, and the value is either the value in the redux state graph, or a callback function. mapStateToAttributes can also be a function that returns this key pair value. This function receives the state and component to compute the value. You can pass the component you want connected, but if it isn't populated, it will get populated by event.getSource(). It also sets a dispatch expando for convenience in the component's controller methods.

getState(): Retrieves the store state.

Installation

Use the deployment buttons above to deploy to either a scratch org, or a developer org.

Otherwise, you can use the SFDX CLI and do a metadata deploy.

Resources

Redux Documentation: http://redux.js.org/

Awesome Redux: https://github.com/xgrommx/awesome-redux

Lightning Components Developer Guide: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_framework.htm

Awesome Lightning: https://github.com/mailtoharshit/awesome-lighting

Awesome Salesforce: https://github.com/mailtoharshit/awesome-salesforce

lightning-redux's Issues

Unsubscribing listeners on component destroy

I am frequently using <aura:if> and <aura:iteration> statements bound to custom components that end up calling the connect method provided by this library.

This works well for a bit, but it ends up slowing down a lot after using an application for a while. After diving deeper into the developer tools in the browser, I notice that the handleChanges() event seems to keep firing for components that have been destroyed (and recreated with different identifiers).

It would be good to see if there is any way we can take the return value from the subscribe method on the redux store to attach an event handler of some sort to the destroy event of the component to call the return value of the subscribe method (unsubscribe). Otherwise I'm not sure how to prevent the subscriber queue from building up with a ton of event handlers over time.

Thoughts on multi store support

Thought I'd put this out here and see what people thought.

It looks like right now the redux component is relying on the window as the central communication point. In order to support multiple redux-enabled 'applications' we need to find a way to control what is dispatched to who.

My instinct would be to have use some sort of namespace attribute on the component, that connecting components would reference.

<c:reduxStore aura:id="store" ns="todo1" />

then the store cmp could just keep track of windows.stores[ns]. I assume this could get a bit messy with the sub/dis queues as well, but could be handled easily enough.

I'm happy to implement and PR this back if there is interest, just wanted to see if any other approaches warranted discussion.

Use with Redux Dev Tools Extension (lockerservice)

Looking to see if you've found a way to hook into the chrome dev tools with the locker service. Right now if I have a small v39 cmp that exposes the window.REDUX_DEVTOOLS_EXTENSION but just wondering if you tried to use the tool at all.

Update to Redux 4.0.0

4.0 of Redux was released, and it does have a few breaking changes, which makes me hesitate to update the StaticResource in this library, since people are actively using it.

Options: Have different version of Redux, and expose an attribute to select the version you want to use, default to the latest if not chosen.

It doesn't look like there is anything huge in the update versus 3.7.2, which is what is presently available. Opening this issue to gather any thoughts from people using this library.

Redux-Logger

Make sure that lightning-redux works with redux-logger.