Skip to content

Commit

Permalink
Merge pull request #23 from farism/master
Browse files Browse the repository at this point in the history
Update README for mergeProps
  • Loading branch information
gcazaciuc committed Oct 12, 2016
2 parents d3d4d47 + 14e1932 commit 7971a36
Showing 1 changed file with 24 additions and 3 deletions.
27 changes: 24 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,12 @@ local({
})
```
## Accessing local state and dispatching local actions
The well know `mapStateToProps` and `mapDispatchToProps` familiar from react-redux `connect` are available having the very same signatures.
The well know `mapStateToProps`, `mapDispatchToProps`, and `mergeProps` familiar from react-redux `connect` are available having the very same signatures.
In fact , internally, redux-fractal uses the connect function from 'react-redux' to connect the component to it's private store.

The difference is, that you get only the component's state in `mapStateToProps` as opposed to the entire app state and the `dispatch`
function in `mapDispatchToProps` dispatches an action tagged with the component key as specified in the HOC config.
Both `mapStateToProps` and `mapDispatchToProps` are completely optional, define them if you need them.
function in `mapDispatchToProps` dispatches an action tagged with the component key as specified in the HOC config. `mergeProps`, on the other hand, is no different.
`mapStateToProps`, `mapDispatchToProps`, and `mergeProps` are completely optional, define them if you need them.
### Mapping component state to props
Beware that the components wrapped in 'local' HOC do not update when global state changes but only when their own state changes. These components are effectively connected to their own private store.
Of course, you can also connect them to the global store using standard 'connect' function.
Expand Down Expand Up @@ -220,6 +220,27 @@ Crazy example: when the sorting from one component changes all dropdowns from an
}
})
```
## Merging local state, local dispatch, and own props
Just like in `connect`, you have the opportunity to transform the final props that are passed into your component using `mergeProps`:
```
local({
key: 'mycomp',
createStore: (props) => createStore(rootReducer, initialState),
mapStateToProps: (componentState, ownProps) => {
...
},
mapDispatchToProps: (localDispatch) =>({
onFilter: (term) => localDispatch(updateSearchTerm(term))
}),
mergeProps: (state, localDispatch, ownProps) =>({
{
...ownProps,
...state,
...localDispatch
}
})
})
```
## Local middleware
Since Redux-fractal relies on redux for manging the component state and offers a private store for the component
you can define middleware for the private component store using the exact same approach as you do when setting up
Expand Down

0 comments on commit 7971a36

Please sign in to comment.