|
| 1 | +# Lightning-Redux [](https://travis-ci.org/madmax983/lightning-redux) |
1 | 2 |
|
2 |
| -# lightning-redux |
3 |
| -Lightning bindings for Redux |
| 3 | +## Usage |
| 4 | +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. |
4 | 5 |
|
5 |
| -#Installation instructions: |
| 6 | +### Component Methods |
| 7 | +#### |
| 8 | +##### createStore(name, reducer, initialState, middleware): create the Redux store. |
6 | 9 |
|
7 |
| -Simple Setup: Deploy the components to a Dev org. |
| 10 | +name: The name of the slice of state for the reducer creating the store. |
8 | 11 |
|
9 |
| -<a href="https://githubsfdeploy.herokuapp.com"> |
10 |
| - <img alt="Deploy to Salesforce" src="https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/deploy.png"> |
11 |
| -</a> |
| 12 | +reducer: Initial root reducer |
12 | 13 |
|
13 |
| -Advanced Setup: |
| 14 | +initialState: You can specify an initial shape to your store's shape. |
14 | 15 |
|
15 |
| -1. Clone repo |
16 |
| -2. Copy jsforce.config.editme.json and create jsforce.config.json. |
17 |
| -3. Enter target Salesforce org credentials. |
18 |
| -4. Install [npm](https://www.npmjs.com/) if you don't already have it. |
19 |
| -5. Run npm install on directory |
| 16 | +middleware: You can include redux middleware like redux-thunk here. Lightning-Redux automatically wraps this with Redux compose. |
20 | 17 |
|
21 |
| -#Gulp Targets |
| 18 | +##### 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. |
22 | 19 |
|
23 |
| -There are a few gulp targets available. Running gulp 'target' will deploy the components to the Salesforce Org in jsforce.config.json |
| 20 | +##### 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. |
24 | 21 |
|
25 |
| -deploy:base - the base Lightning-Redux bindings. These are all the component you need to use Redux in Lightning (plus redux. |
26 |
| -I am keeping a copy of Redux in the addons folder for convenience, but ideally you'll want to be installing |
27 |
| -it as a static resource with a fresh version). |
| 22 | +##### replaceReducer(nextReducer): Wraps Redux's replaceReducer function. Replaces the reducer function in the redux store. |
28 | 23 |
|
29 |
| -deploy:addons - utility components and events to assist you in using Redux and Lightning Components together. |
| 24 | +##### registerReducer(name, reducer): Adds the specified reducer function to the redux store with the specificed name as it's slice of state. |
30 | 25 |
|
31 |
| -deploy:SimpleCounter - deploy the SimpleCounter example |
| 26 | +##### connect(mapStateToAttributes, target): mapStateToAttributes is 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. This function receives the component and state 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. |
32 | 27 |
|
33 |
| -deploy:ComplexCounter - deploy the ComplexCounter example |
| 28 | +##### getState: Technically not a component method, this is a convenience expando that allows access to the Redux state. |
34 | 29 |
|
35 |
| -deploy:todo - deploy the todo example. |
36 |
| - |
37 |
| -deploy:webpackTodo - deploy the webpackTodo example. |
| 30 | +## Installation |
| 31 | +Lightning-Redux Unmanaged Packaged (Redux Component, redux and redux-thunk static resource): https://login.salesforce.com/packaging/installPackage.apexp?p0=04t50000000M7PT |
| 32 | +Lightning-Redux-Examples (Counter and Todo Examples unmanaged package): https://login.salesforce.com/packaging/installPackage.apexp?p0=04t50000000M7Pi |
38 | 33 |
|
39 |
| -deploy:examples - deploy all of the examples |
| 34 | +Otherwise, you can use the SFDX CLI to convert the source and do a metadata deploy. |
40 | 35 |
|
41 |
| -deploy:kitchensink - DEPLOY ALL THE THINGS! |
| 36 | +## Resources |
| 37 | +Redux Documentation: http://redux.js.org/ |
| 38 | +Awesome Redux: https://github.com/xgrommx/awesome-redux |
| 39 | +Lightning Components Developer Guide: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_framework.htm |
| 40 | +Awesome Lightning: https://github.com/mailtoharshit/awesome-lighting |
| 41 | +Awesome Salesforce: https://github.com/mailtoharshit/awesome-salesforce |
42 | 42 |
|
43 |
| -After deploying, you will want to create a Preview style app to plunk the components in to see them. |
44 |
| -Or take that Todo example, implement flexipage:availableForAllPageTypes", and plunk it down on your Lightning Experience homepage. |
45 |
| - |
46 |
| -#Lightning-Redux Bindings |
47 |
| -You can just import Redux into a Lightning component and start using it right now as demonstrated in the SimpleCounter example. |
48 |
| -However, a few binding components are provided here to assist you in architecting a Lightning-Redux app. |
49 |
| -The base components are the Provider component, and a handful of events: reduxStoreChange, storeInitialized, and dispatchAction. |
50 |
| - |
51 |
| -In addition, there a number of utility components provided in the addons folder. These are demonstrated in the todoApp example, but as the webpackTodo example shows, they are not necessary. |
52 |
| - |
53 |
| -#Base Components |
54 |
| -##Provider |
55 |
| -The main interface between Redux and your Lightning Components. The Redux Store is kept inside a store aura:attribute with a type of "Object". |
56 |
| -You can either set the store directly via some bundled javascript file in the app level container, or pass the store in via the storeInitialized Event. |
57 |
| -Either way you will want to make sure to fire the storeInitialized event to bootstrap the provider. |
58 |
| -The provider emits reduxStoreChange events whenever there is a change in the store. Write handlers in your components to react to these changes, and make appropriate changes. |
59 |
| -It also handles a dispatchAction event. The payload that lightning event is an Action, and the handler for this event will dispatch the action on the store in the Provider. |
60 |
| - |
61 |
| -##storeIntitialized Event |
62 |
| -Has a store param for sending the store to be set in the Provider. |
63 |
| -Also useful to write handlers on the other components when you want to have an action fire when the Provider first starts up(i.e. retrieving a list of SObjects from the DB) |
64 |
| - |
65 |
| -##reduxStoreChange Event |
66 |
| -This event is fired by the Provider whenever there is a change in the store. Write handlers on components that you want to react to changes in the store. |
67 |
| - |
68 |
| -##dispatchAction Event |
69 |
| -Lightning components can register and fire this event to send actions to be dispatched by the store in the Provider. |
70 |
| -The use of this component can be eliminated by using the bindActionCreators utility method from Redux, as demonstrated in the webpackTodo example. |
71 |
| - |
72 |
| -#Addon Components |
73 |
| -##Reducer |
74 |
| -An abstract component that needs to be extended by a concrete component in order to function. Implement your reducers in these concrete components. |
75 |
| -Setting the name attribute in your concrete implementation will determine the name of the key in Redux store graph. |
76 |
| - |
77 |
| -##RootReducer |
78 |
| -The RootReducer will take all the concrete Reducer components you write inside of it's {!v.body} and combine them with the combineReducers function from Redux. |
79 |
| -It will then emit a ReducersCombined event with this combined Reducer to be handled either by the top level app component, or a store component so that the store can be created. |
80 |
| -See the todoStore in the todoApp example for a demonstration. |
81 |
| - |
82 |
| -#Using a bundling library like Webpack or Browserify |
83 |
| -This is the best way to go, but can be a little daunting for beginners. |
84 |
| -You can find a lot of great info at [Awesome Webpack](https://github.com/d3viant0ne/awesome-webpack), [Browserify Articles](http://browserify.org/articles.html) |
85 |
| -The webpackTodo example included in this repo should also give you a good idea of how to get started. The basic idea is to write all your javascript files the module import syntax you feel comfortable with. |
86 |
| -Then webpack or browserify will bundle this all together, and you can use this bundle directly in your Lightning Components. |
87 |
| -The main thing is to expose the bundle as a library, and at the bare minimum export the store so that you can set it in the Provider component. |
88 |
| -The webpackTodo example also shows how you can use bindActionCreators to export your actions for use in the Lightning Component controllers. |
89 |
| -One of the great benefits of using this model is that all your third-party dependencies are kept in one file (or multiple code-splitting files, if you're into that kind of thing), and you can use all the npm goodness like shrinkwrap, update, etc. |
0 commit comments