react-redux

Changes

• Fix subscription bug when a new store is passed as a prop (fixes HMR).

• Use shallowEqual from fbjs.

• Stringify WrappedComponent in error message.

• Ensure single arg mapStateToProps factory gets ownProps. (#616 @lukeapage)

• Duck-type subscription in prop checks

• Add React 16 as a valid peer dep

This release is brought to you by contributions from the following people: @jimbolla, @vhmth, @btd, @roncohen, @ynonp, and @appden. In addition, there were many non-code contributions in discussions on issues and testing the alpha, beta, and rc versions by many other folks (too many to list!). Thank you to everyone who made this a very positive, inclusive, well-critiqued, community-driven release!

TL;DR

• Backwards compatible API

• Major internal changes

• Significant performance improvements in common usage patterns

• Bugs fixed

• Additional features added to connect()

• New connectAdvanced() API

• What's next?

API Compatibility

Version 5.0 maintains API compatibility with v4.x but due to major internal changes and potential behavior differences across nearly all API surfaces, semver dictates a major version bump. Also, it's good marketing! 💰 Store state change notifications sent to components are now guaranteed to occur top-down, so if your code may behave differently if it relied on notifications happening out of order.

Internal Changes

Internally, the code for connect has been rewritten from the ground-up to be more modular, with the intention of greater maintainability and extensibility. This has also led to some new features and performance improvements.

Performance improvements

Significant performance gains were achieved by avoiding extra calls to setState() and render() by ensuring the order of change notifications to occur top-down, matching React's natural flow. Performance tests and benchmarks are discussed in #416.

Bugfixes

Some bugs/issues are resolved, related to performance loss and also impure components not re-rendering.

New features added to connect()

The behavior of connect() is now more customizable, by passing additional properties in the options arg. These will be described in the API docs.

New top level API: connectAdvanced()

The new implementation of connect() splits its behavior such that it is now a wrapper around a more-generalized connectAdvanced(). This connectAdvanced() method can be called directly if you have extreme performance needs or want to craft an API different than that of connect(). This will be described in the API docs.

What's next?

We're looking at removing the shouldComponentUpdate optimization. Since this version is much more performant on its own, that isn't needed. This will fix long-standing problems with other libraries that use React's context API. There are workarounds, but things should work without either library authors having to bend over backwards or React having to make API changes.

We will accept bugfixes on the 4.x branch (the 3.x branch will be going away; but the tags to 3.x versions will remain!), but new features should be built against the next branch. We love PRs, so keep them coming!

• removed

  Removes the broken jsnext:main. It is supposed to point to the ES module build but we mistakingly pointed it to the src, so it never worked for anyone anyway. For now, we don’t provide an ES module build in React Redux, so if you use Rollup, you need to use the CommonJS plugin for it. Realistically, it doesn’t make a big difference because React Redux assumes you use React anyway (which uses CommonJS), and it also doesn’t benefit from tree shaking because there are only two exports (connect and <Provider>) and you will need both pretty much any time.

This is a minor bump because we couldn’t break anybody with this (it was broken before), but it seems to deserve more than a patch bump as it’s a change in the build configuration.

Breaking Changes

React 0.14 is now required and a peer dependency

If you need 0.13 support, keep using 3.x. In addition, React has now been promoted to be a peer dependency because you’ll use the same react package for web and native.

react-redux/native entry point has been removed

Track this React Native issue and wait until RN works on top of React 0.14. Then React Redux 4.x should “just work” in React Native. Until then, you need to keep using 3.x with React Native.

<Provider> no longer accepts a function child

This resolves a ton of router-related issues and also helps beginners understand what's going on.

Before

React.render(
  <Provider>
    {() => <App />}
  </Provider>,
  rootEl
);

After

ReactDOM.render(
  <Provider>
    <App />
  </Provider>,
  rootEl
);

Refs are now opt-in

connect() no longer provides a ref to the wrapped component by default. You need to specify withRef: true in the options as the fourth argument to connect() to get the old behavior. getWrappedInstance() will throw unless you do that.

This fixes #141.

Before

class MyComponent extends Component { ... }
MyComponent = connect(mapStateToProps)(MyComponent);

// later
let instance = React.render(<MyComponent />, targetEl);
console.log(instance.getWrappedInstance());

After

class MyComponent extends Component { ... }
MyComponent = connect(mapStateToProps, null, null, { withRef: true })(MyComponent);

// later
let instance = ReactDOM.render(<MyComponent />, targetEl);
console.log(instance.getWrappedInstance());

(Note: this is a 3.x release. Unless you’re using React Native, you should use 4.x instead.)

• Fixes an issue with missing react-redux/native in 3.1.1 (#216)

(Note: this is a 3.x release. Unless you’re using React Native, you should use 4.x instead.)

• Removes .babelrc in the compiled package because it is irrelevant (we ship ES5 code) and breaks React Native 0.16 and some consumers who use Babel 6 forgetting to exclude node_modules from transformations. (#213, #1033, #1039, #1127)

Breaking Changes Since 3.0.0-alpha

This release is identical to 3.0.0-alpha.
If you’re already using it, you don’t need to change anything.

Breaking Changes Since 2.x

Now the map functions (mapStateToProps, mapDispatchToProps and mergeProps) are not called until React starts to render the connect()ed components. Previously the map functions where called immediately when store changed which could cause weird edge case bugs when the ownProps parameter was a derivative of the state. The state from which it was derivative of was a different version than what was passed as the stateparameter. In some cases when using nested connect()ed components the states can be incompatible with each other and cause very confusing bugs in user code.

Unfortunately the state stays consistent only when store dispatches are called in batches ie. from DOM handlers or manually from ReactDOM.unstable_batchedUpdates(fn). Luckily redux-batched-updates middleware can be used to force batching for all dispatches. Also React plans to move on batching by default so this will become obsolete in future.

If you're interested in the details, feel free to check out:

• breaking

  A new test that was failing in 2.x, but is fixed in 3.0 beta

• breaking

  The original issue

• breaking

  The pull request attempting to fix it

Breaking Changes

Hot reloading reducers is now explicit (#80)

React Redux used to magically allow reducer hot reloading. This magic used to cause problems (#301, #340), so we made the usage of replaceReducer() for hot reloading explicit (#667).

If you used hot reloading of reducers, you'll need to add module.hot API calls to the place where you create the store. (Of course, assuming that you use Webpack.)

Before

import { createStore } from 'redux';
import rootReducer from '../reducers/index';

export default function configureStore(initialState) {
  return createStore(rootReducer, initialState);
}

After

import { createStore } from 'redux';
import rootReducer from '../reducers/index';

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers/index');
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

This is more code, but what's happening is now explicit, and this also lets you do this right in index.js instead of creating a separate <Root> component. See #667 for a migration example.

process.env.NODE_ENV is required for CommonJS build (#81)

In 0.7.0, we temporarily removed the dependency on it to support React Native, but now that RN 0.10 is out with process.env.NODE_ENV polyfill, we again demand it to be defined. If you're not ready to use RN 0.10, or are in a different environment, either use a browser build, or shim it yourself.

We're stable!

Breaking Changes

The function passed to <Provider> now has to return an element. In all valid circumstances this should already be the case for your app. For example, <Provider store={store}>{() => 42}</Provider> or <Provider store={store}>{() => {}}</Provider> used to work, but made no sense. Now we're forcing you to return a single valid element.

Improvements

If you use React 0.13, you will see a warning if you attempt to pass a React element instead of a function to <Provider>. For example, <Provide store={store}><MyApp /></Provider> now produces a warning with React 0.13.

However, if you use React 0.14 (currently available as a beta, soon to be released), you can finally pass just the React element! For example, with React 0.14 and React Redux 1.0, you can write <Provider store={store}><MyApp /></Provider>. In fact React Redux will warn you if you use the function syntax together with React 0.14, as it is no longer needed.

React Native support fixed

0.5.x and 0.6.0 had a regression that caused an error in React Native due to process.env not being polyfilled.
This release should fix it. (#39)

Breaking Changes

Just some renames:

• breaking

  Static property DecoratedComponent => WrappedComponent

• breaking

  Instance method getUnferlyingRef() => getWrappedInstance()

• breaking

  In addition, the wrapped instance is now available as component.refs.wrappedInstance

This release should make your connect()ed components render faster.

Breaking Changes

The components generated by connect() no longer redraw if you deeply mutate their props. Redux embraces immutability, and deep mutations of state never caused redraws anyway, so it's reasonable to fully embrace it, and do the same for props.

Now this:

handleClick() {
  this.state.obj.something = 'changed';
  this.setState({ obj: this.state.obj });
}

render() {
  return <ConnectedComponent obj={this.state.obj} />
}

will not redraw if ConnectedComponent is something you got from React Redux's connect().

If you use this pattern in your code, change it to always create new objects:

handleClick() {
  this.setState({ obj: Object.assign({}, this.state.obj, { something: 'changed' }) });
}

render() {
  return <ConnectedComponent obj={this.state.obj} />
}

Why

This lets us be very efficient with state updates. Even if you supply a custom mergeProps function, we'll only update the connected component if the object it returns is shallowly unequal to the stored one.

New API!

As discussed in #1 and implemented by @gnoff in #16, we wanted to make connect() more powerful. Now it supports binding action creators! However, it stays performant. In fact, you can write more performant Redux apps with it because new connect() takes care of only binding action creators once.

Breaking Changes

There is just one breaking change: the function passed to connect no longer accepts props as a second argument. The upgrade path is to specify mergeProps function as the third argument in connect:

Before

connect((state, props) => state.todosByUser[props.userId])

After

connect(
  (state) => ({ todos: state.todos }),
  null,
  (stateSlice, actionCreators, props) => ({
    todos: stateSlice.todosByUser[props.userId]
  })

The upside is you can now add action creators depending on props just as easily:

connect(
  (state) => ({ todos: state.todos }),
  TodoActionCreators,
  (stateSlice, actionCreators, props) => ({
    todos: stateSlice.todosByUser[props.userId],
    addTodo: (text) => actionCreators.addTodo(props.userId, text)
  })

Improvements

Here's what you can do with the new connect()!

Inject just dispatch and don't listen to store

export default connect()(TodoApp);

Inject dispatch and every field in the global state (SLOW!)

export default connect(state => state)(TodoApp);

Inject dispatch and todos

function mapState(state) {
  return { todos: state.todos };
}

export default connect(mapState)(TodoApp);

Inject todos and all action creators (addTodo, completeTodo, ...)

import * as actionCreators from './actionCreators';

function mapState(state) {
  return { todos: state.todos };
}

export default connect(mapState, actionCreators)(TodoApp);

Inject todos and all action creators (addTodo, completeTodo, ...) as actions

import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';

function mapState(state) {
  return { todos: state.todos };
}

function mapDispatch(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

export default connect(mapState, mapDispatch)(TodoApp);

Inject todos and a specific action creator (addTodo)

import { addTodo } from './actionCreators';
import { bindActionCreators } from 'redux';

function mapState(state) {
  return { todos: state.todos };
}

function mapDispatch(dispatch) {
  return bindActionCreators({ addTodo }, dispatch);
}

export default connect(mapState, mapDispatch)(TodoApp);

Inject todos, todoActionCreators as todoActions, and counterActionCreators as counterActions

import * as todoActionCreators from './todoActionCreators';
import * as counterActionCreators from './counterActionCreators';
import { bindActionCreators } from 'redux';

function mapState(state) {
  return { todos: state.todos };
}

function mapDispatch(dispatch) {
  return {
    todoActions: bindActionCreators(todoActionCreators, dispatch),
    counterActions: bindActionCreators(counterActionCreators, dispatch)
  };
}

export default connect(mapState, mapDispatch)(TodoApp);

Inject todos, and todoActionCreators and counterActionCreators together as actions

import * as todoActionCreators from './todoActionCreators';
import * as counterActionCreators from './counterActionCreators';
import { bindActionCreators } from 'redux';

function mapState(state) {
  return { todos: state.todos };
}

function mapDispatch(dispatch) {
  return {
    actions: bindActionCreators({ ...todoActionCreators, ...counterActionCreators }, dispatch)
  };
}

export default connect(mapState, mapDispatch)(TodoApp);

Inject todos, and all todoActionCreators and counterActionCreators directly as props

import * as todoActionCreators from './todoActionCreators';
import * as counterActionCreators from './counterActionCreators';
import { bindActionCreators } from 'redux';

function mapState(state) {
  return { todos: state.todos };
}

function mapDispatch(dispatch) {
  return bindActionCreators(Object.assign({}, todoActionCreators, counterActionCreators), dispatch);
}

export default connect(mapState, mapDispatch)(TodoApp);

Inject todos of a specific user depending on props, and inject props.userId into the action

import * as actionCreators from './actionCreators';

function mapState(state) {
  return { todos: state.todos };
}

function mergeProps(state, actions, props) {
  return Object.assign({}, props, {
    todos: state.todos[props.userId],
    addTodo: (text) => actions.addTodo(props.userId, text)
  });
}

export default connect(mapState, actionCreators, mergeProps)(TodoApp);