Skip to content

v3.0.0-beta2

Pre-release
Pre-release
Compare
Choose a tag to compare
@yesmeck yesmeck released this 04 Jul 11:59
· 38 commits to master since this release

This is a whole new rewrite version.

Breaking changes

  1. connectMultireducer has been removed, you can use react-redux's connect directly.
  2. multireducerBindActionCreators has been renamed to bindActionCreators.

Migration Guide

Version 2

import React, { Component, PropTypes } from 'react';
import { connectMultireducer } from 'multireducer';
import { add, remove } from './actions/list';

const mapStateToProps = (key, state) => ({ list: state.listCollection[key] });

const mapDispatchToProps = {add, remove};

ListComponent = connectMultireducer(
  mapStateToProps,
  mapDispatchToProps
)(ListComponent);

export default ListComponent;
render() {
  return (
    <div>
      <h1>Lists</h1>
      <ListComponent multireducerKey="proposed"/>
      <ListComponent multireducerKey="scheduled"/>
      <ListComponent multireducerKey="active"/>
      <ListComponent multireducerKey="complete"/>
    </div>
  );
}

Version 3

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';  // <= use react-redux's connect directly
import { bindActionCreators } from 'multireducer';  // <= use multireducer's version of bindActionCreators
import { add, remove } from './actions/list';

const mapStateToProps = (state, { as }) => ({ list: state.listCollection[as] });  // <= access state by multireducer key

const mapDispatchToProps = (dispatch, { as }) => bindActionCreators({ add, remove }, dispatch, as); // <= pass multireducer key to bindActionCreators

ListComponent = connectMultireducer(
  mapStateToProps,
  mapDispatchToProps
)(ListComponent);

export default ListComponent;
render() {
  return (
    <div>
      <h1>Lists</h1>
       {/* you can name the multireducer key whatever you want, it's 'as' in this example */}
      <ListComponent as="proposed"/>
      <ListComponent as="scheduled"/>
      <ListComponent as="active"/>
      <ListComponent as="complete"/>
    </div>
  );
}