Linking
Alternative Redux bindings for React.
API
linkApp({reducers, [preload], component, [env]})
Create a store and mount the app with it.
Install peer react implementation (preact
or react
+ react-dom
) and import corresponding version(import {linkApp} from 'linking/preact'
or import {linkApp} from 'linking/react'
) to use.
Coming s∞n: import linkApp from 'linking/vue'
Arguments
reducers
(Object): An object that will be passed tocombineReducers
of Redux. In addition to reducing functions, object values can also be updater maps, and will be converted to reducing functions byhandle-actions
.preload
(Function): A function that returns preloaded state.component
((p)React component): The root component of the app.
Returns
(Store): Redux store created with specified reducers.
While in development environment, HMR helper functions will also be added to the store
object. replaceApp
can be used to replace the root component, and replaceReducers
also accepts the reducers
object passed to linkApp
.
Example
const store = if modulehot modulehotaccept'./reduce' store modulehotaccept'./main' store
composeLink({Component, createClass, [propTypes]})
Create the link
function for specified react implementation.
Examples
React
const link =
preact
const link =
link(render[, select][, merge])
Link a render function to a store. Return a linked render function or component.
props.store
will be used if store
is passed to the returned function, other components use the store provided by their ancestor.
Arguments
-
select(state[, ownProps])
: Select state properties related to the linked component. Called when store state changes, re-rendering is skipped if result of this function is shallowly equal to previous. Omit this argument to ignore store updates. Defaults to() => undefined
. -
merge(selectedState, bindAction, [ownProps])
Defaults toselectedProps => selectedProps
. Compose the props object to be passed to the linked component.bindAction(action, [options])
Creates event handler functions that dispatch passedaction
. It is inversion of control todispatch
.action
: object orcreateAction(event, [options])
action
can also be a function returns an action, or a promise resolves to an action. -
render(props)
: accepts a single "props" object argument with data and returns aReact
element.
Examples
Inject store for child elements
const link = const root = ReactDOM
Inject todos and addTodo
{ return todos: statetodos } { return Object} todoApp mapStateToProps merge
connect
and Provider
of react-redux
implement const h = ReactcreateElementconst link = { const element = reactChildren { return element } const container = return } { return dispatch} { return Object} { if typeof mapDispatchToProps == 'function' return return } { { const actions = return } return { const render = }}
handleActions(updaterMap[, defaultState={}]): reduce
Turn an updater map into a reducing function.
The updater with key equal to type of dispatched action type is used for reduction.
Current state and payload of the action is passed to the updater function, and result of it is shallowly merged into current state, like setState
.
If the updater returned a falsly value, or there's no updater for the action type, original state is returned instead.
Exmaples
const updaters = count: count + payload count: count - payload count: 0const reduce = let actual expected actual = expected = count: 3 data: 't't actual = expected = count: 5t
composeReduce(reducers)
Turns an object into a single reducing function like combineReducers
.
Arguments
reducers
(Object): In addition to reducing functions, object values can also be updater maps, and will be converted to reducing functions by handleActions
.
Examples
{ } const counter = counter: counter + amount counter: counter - amount const reducer = const store =
sideEffect :: Component -> handleChange -> Component
Create a component that, when mounting, updating, unmounting, calls handleChange
with props of each mounted instance.
Examples
Setting document title
const arrayLast = listlistlength -1const setTitle = { const title=documenttitle} = documenttitle = title} ComponentsetTitle