Bring back the ability to pass raw store

This commit is contained in:
Dan Abramov 2015-09-24 22:51:59 +03:00
parent f05afda46a
commit 94826d610e
4 changed files with 52 additions and 21 deletions

View File

@ -13,7 +13,7 @@ export default class Root extends Component {
<CounterApp /> <CounterApp />
</Provider> </Provider>
<Dock position='right' isVisible dimMode='none'> <Dock position='right' isVisible dimMode='none'>
<LogMonitor store={store.devToolsStore} /> <LogMonitor store={store} />
</Dock> </Dock>
</div> </div>
); );

View File

@ -1,6 +1,40 @@
import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { ActionCreators } from './devTools'; import { ActionCreators } from './devTools';
export default function connectMonitor(Monitor) { export default function connectMonitor(Monitor) {
return connect(state => state, ActionCreators)(Monitor); const ConnectedMonitor = connect(state => state, ActionCreators)(Monitor);
class DevTools extends Component {
static propTypes = {
store(props, propName, componentName) {
if (!props.store) {
return new Error('Required prop `store` was not specified in `' + componentName + '`.');
}
if (!props.store.devToolsStore) {
return new Error(
'Could not find the DevTools store inside the `store` prop passed to `' +
componentName +
'`. Have you applied the devTools() store enhancer?'
);
}
}
};
render() {
const { store } = this.props;
if (!store) {
return null;
}
const { devToolsStore } = store;
if (!devToolsStore) {
return null;
}
return <ConnectedMonitor {...this.props} store={devToolsStore} />;
}
}
return DevTools;
} }

View File

@ -2,8 +2,7 @@ import expect from 'expect';
import jsdom from 'mocha-jsdom'; import jsdom from 'mocha-jsdom';
import React, { Component } from 'react'; import React, { Component } from 'react';
import TestUtils from 'react-addons-test-utils'; import TestUtils from 'react-addons-test-utils';
import createDevTools from '../src/createDevTools'; import { connectMonitor, devTools } from '../src';
import devTools from '../src/devTools';
import { createStore } from 'redux'; import { createStore } from 'redux';
class MockMonitor extends Component { class MockMonitor extends Component {
@ -12,14 +11,14 @@ class MockMonitor extends Component {
} }
} }
describe('createDevTools', () => { describe('connectMonitor', () => {
jsdom(); jsdom();
it('should pass devToolsStore to monitor', () => { it('should pass devToolsStore to monitor', () => {
const store = devTools()(createStore)(() => {}); const store = devTools()(createStore)(() => {});
const DevTools = createDevTools(React); const ConnectedMonitor = connectMonitor(MockMonitor);
const tree = TestUtils.renderIntoDocument( const tree = TestUtils.renderIntoDocument(
<DevTools monitor={MockMonitor} store={store} /> <ConnectedMonitor store={store} />
); );
const mockMonitor = TestUtils.findRenderedComponentWithType(tree, MockMonitor); const mockMonitor = TestUtils.findRenderedComponentWithType(tree, MockMonitor);
expect(mockMonitor.props.store).toBe(store.devToolsStore); expect(mockMonitor.props.store).toBe(store.devToolsStore);
@ -27,9 +26,9 @@ describe('createDevTools', () => {
it('should pass props to monitor', () => { it('should pass props to monitor', () => {
const store = devTools()(createStore)(() => {}); const store = devTools()(createStore)(() => {});
const DevTools = createDevTools(React); const ConnectedMonitor = connectMonitor(MockMonitor);
const tree = TestUtils.renderIntoDocument( const tree = TestUtils.renderIntoDocument(
<DevTools monitor={MockMonitor} store={store} one={1} two={2}/> <ConnectedMonitor store={store} one={1} two={2}/>
); );
const mockMonitor = TestUtils.findRenderedComponentWithType(tree, MockMonitor); const mockMonitor = TestUtils.findRenderedComponentWithType(tree, MockMonitor);
expect(mockMonitor.props.one).toBe(1); expect(mockMonitor.props.one).toBe(1);
@ -37,7 +36,7 @@ describe('createDevTools', () => {
}); });
it('should subscribe monitor to store updates', () => { it('should subscribe monitor to store updates', () => {
const DevTools = createDevTools(React); const ConnectedMonitor = connectMonitor(MockMonitor);
const store = devTools()(createStore)( const store = devTools()(createStore)(
(state, action) => { (state, action) => {
switch (action.type) { switch (action.type) {
@ -50,7 +49,7 @@ describe('createDevTools', () => {
0 0
); );
const tree = TestUtils.renderIntoDocument( const tree = TestUtils.renderIntoDocument(
<DevTools monitor={MockMonitor} store={store} /> <ConnectedMonitor store={store} />
); );
store.dispatch({type: 'INC'}); store.dispatch({type: 'INC'});
@ -63,21 +62,19 @@ describe('createDevTools', () => {
}); });
it('should warn if devTools() not in middleware', () => { it('should warn if devTools() not in middleware', () => {
const spy = expect.spyOn(console, 'error');
const store = createStore(() => {}); const store = createStore(() => {});
const DevTools = createDevTools(React); const ConnectedMonitor = connectMonitor(MockMonitor);
expect( // Force to re-evaluate propType checks on every run
TestUtils.renderIntoDocument, ConnectedMonitor.displayName = Math.random().toString();
).withArgs(
<DevTools monitor={MockMonitor} store={store} /> const spy = expect.spyOn(console, 'error');
).toThrow(); TestUtils.renderIntoDocument(<ConnectedMonitor store={store} />);
spy.restore();
expect(spy.calls).toContain( expect(spy.calls).toContain(
/Could not find the devTools store/, /Could not find the DevTools store/,
(call, errMsg) => call.arguments[0].match(errMsg) (call, errMsg) => call.arguments[0].match(errMsg)
); );
spy.restore();
}); });
}); });

View File