api.org

API

mixin

this is for ES6 class

mixin(ComponentClass:class, actions:object, JsToImmutableFunction:function, ImmutableToJsFunction:function):object

JsToImmutableFunction and ImmutableToJsFunction are optional

example:

import {mixin} from 'transdux'
let actions = {
  ...
}
class TodoItem extends React.Component {
  ...
}
export default mixin(TodoItem, actions)

dispatch

dispatch(TargetComponentClass:class, actionName:string, value:any)

example:

when component TodoItem want to send message to component MainSection ‘s complete action.

import MainSection from './MainSection'
class TodoItem extends React.Component {
 ...
    render(){
        <input className="toggle"
        onChange={() => this.dispatch(MainSection, 'complete',{id:todo.id})} />

    }
 ...
}

One thing you may need to notice is that message between component is Class level, not Instance level. For example, if you have multiple MainSection components, they will all reveive the same massage from TodoItem.

actions

action is no more than just a normal javascript object, which contains all the action functions.

but you have to pay a little attention to make all function in it. All functions should return object, which normally just like what you wanna put in the parameter of function this.setState.

bindActions

for react mixin

bindActions(actions:object, JsToImmutableFunction:function, ImmutableToJsFunction:function)

JsToImmutableFunction and ImmutableToJsFunction are optional

example:

import {TxMixin} from 'transdux'
let MainSection = React.createClass({
  mixins: [TxMixin],
  componentDidMount(){
    this.bindActions(actions)
  },
  ...
})

for mixin, you have to maually call bindActions some where, it’s recommended to put it in componentDidMount() where not blocking your component’s render.