mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-22 09:36:43 +03:00
Bring back the ability to pass raw store
This commit is contained in:
parent
f05afda46a
commit
94826d610e
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user