I'm trying to export a redux project as a node_module that has an index.js shown below (simplified):
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import App from './App.jsx';
const middlewares = [thunk.withExtraArgument(), promiseMiddleware()];
const middlewareEnhancer = applyMiddleware(...middlewares);
const preloadedState = {};
const store = createStore(
rootReducer,
preloadedState,
middlewareEnhancer
);
const ExampleModule = (props) => {
return (
<Provider store={store}>
<App />
</Provider>
);
};
export default ExampleModule;
In my main application:
...
import ExampleModule from 'example-module';
class Application extends React.Component {
render() {
return <ExampleModule />;
}
}
function mapStateToProps({ state }) {
return {
state: state
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(require('..').actions, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Application);
This throws an error:
bundle.js:349 Uncaught Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)"
I'm assuming it's because this essentially creates nested <Providers> which is against Redux's methodology of one store.
My question would be what would be the best way to go about publishing a node_module that has a redux store in it?
Found the answer here:
https://redux.js.org/recipes/isolating-redux-sub-apps
It keeps the store local to the component.
Related
I am new to redux and I am stuck in an error, while dispatching an action I am getting error
"Actions must be plain objects. Use custom middleware for async actions.", I have checked the flow but can't see any problem,here's below code"
My JS container File:
import React from 'react'
import {Redirect} from 'react-router-dom'
import * as actions from './../store/actions/index'
import { connect } from 'react-redux'
class home extends React.Component{
constructor(props){
super(props);
this.state={
isClk:false
}
}
performLogout = (evt)=> {
evt.preventDefault();
this.props.onLogout();
this.setState({isClk: true})
};
render(){
let redirect=null;
if (this.state.isClk){
redirect=<Redirect to="/login"/>
}
return(
<div>
{redirect}
<h1>In Home</h1>
<button onClick={this.performLogout}>Logout</button>
</div>
)
}
}
const mapDispatchToProps = dispatch =>{
return {
onLogout: () => dispatch(actions.logout())
}
};
export default connect(null,mapDispatchToProps)(home)
Index.js:
export {
auth,
logout
} from './auth'
Actions(auth.js):
export const logout =()=>{
return(
actionTypes.AUTH_LOGOUT
)
};
Reducers:
const authLogout=(state,action)=>{
return updateObject(state,{
token:null,
loading:false,
error:null
})
};
const reducer=(state=initialState,action)=>{
switch(action.type){
case actionTypes.AUTH_FAIL: return authFail(state,action);
case actionTypes.AUTH_LOGOUT: return authLogout(state,action);
default:
return state
}
};
Store:
import {Provider} from 'react-redux'
import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import {BrowserRouter} from "react-router-dom";
import authReducer from './Containers/store/reducers/auth'
import thunk from 'redux-thunk';
const composeEnhancers = compose;
const RootReducer=combineReducers({
auth:authReducer
});
const store=createStore(RootReducer,composeEnhancers(applyMiddleware(thunk)));
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById('root'));
I want to perform logout action when user click on logout button,I can get where the problem, Is my store is properly initialized or any problem in thunk? or anyother maybe while dispatching, kindly guide?
Your action creator should return an object with a type, currently you're just returning the string constant only.
// Actions(auth.js):
export const logout =()=>{
return {
type: actionTypes.AUTH_LOGOUT,
};
};
The actions in Redux needs to be the plain object, so you need to add an object like below
export const logout = () => ({
type: actionTypes.AUTH_LOGOUT
});
I have a component that needs to hide/show content based on whether the user is logged in or not. My Redux logger is showing the proper state change but the connected component is not re-rendering. At first I figured it was a mutation issue, however after attempting the same thing with immutable.js and redux-starter-kit's createReducer with no success, I figured otherwise.
It's my understanding that when using mapStateToProps the component should re-render the same as if it were local state.
Reducer:
export default (
state = {
hasAuth: false,
},
action
) => {
switch (action.type) {
case AUTH_LOADED:
return { ...state, hasAuth: true }
default:
return state;
}
};
Component:
class Screen extends PureComponent {
render() {
return (
<Fragment>
{this.props.hasAuth && <Text>Logged In</Text>}
</Fragment>
);
}
}
export default connect(state => ({
hasAuth: state.auth.hasAuth,
}))(Screen);
Root Reducer
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { batchedSubscribe } from 'redux-batched-subscribe';
import thunk from 'redux-thunk';
import reduxMulti from 'redux-multi';
import logger from 'redux-logger';
import auth from './reducers/auth';
const rootReducer = combineReducers({
auth,
});
const createStoreWithMiddleware = applyMiddleware(thunk, reduxMulti, logger)(
createStore
);
const createStoreWithBatching = batchedSubscribe(fn => fn())(
createStoreWithMiddleware
);
export default createStoreWithBatching(rootReducer);
You have to wire up Redux in Combination with batchedSubscribe correctly.
Here are the docs with a short guide: https://github.com/tappleby/redux-batched-subscribe
I'm testing some react components, a basic tests suite just to know if a component is rendering and their childs.
I'm using redux-mock-store to make the store and {mount} enzyme to mount the container in a provider, but even mocking the correct store this error is always fired:
TypeError: Cannot read property 'pathname' of undefined
Here is my very deadly basic test:
import React from 'react';
import { mount } from 'enzyme';
import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import App from '../containers/App.container';
describe('App', () => {
let wrapper;
const mockStore = configureStore([]);
const store = mockStore({
router: {
location: { pathname: '/home', query: {}, search: '' },
params: {}
}
});
console.log(store.getState());
beforeEach(() => {
wrapper = mount(
<Provider store={store}>
<App />
</Provider>
);
});
it('Should render app and container elements', () => {
expect(wrapper.find('.app').exists()).toBeTruthy();
expect(wrapper.find('.container').exists()).toBeTruthy();
});
it('Should render the navbar', () => {
expect(wrapper.find('nav').exists()).toBeTruthy();
});
});
And the (even more) simple component / container:
import React, { Component } from 'react';
import NavBar from '../components/Navbar';
class App extends Component {
render() {
const { location, logout} = this.props;
console.log(location);
return (
<section className='app'>
<NavBar location={location.pathname} onLogoutClick={logout}/>
<div className='container'>
{this.props.children}
</div>
</section>
);
}
}
export default App;
Container:
import { connect } from 'react-redux';
import { signOut } from '../actions/auth.actions'
import App from '../components/App';
const mapStateToProps = (state, ownProps) => {
return {
location: ownProps.location
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
logout: () => {
dispatch(signOut())
}
}
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
I can't figure out the problem of the test, the mockStore is in the correct format:
Any idea?
Update:
Thinking about it, I have no reducer / prop in the rootReducer for the location, but, i just want to pass down through the children components the location object properties that react-redux-router make available in the ownProps argument.
Weird fact: logging the location property in the app returns me the correct object.
In the tests, is always undefined... (as the error shows).
Here is my rootReducer:
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import { routerReducer } from 'react-router-redux';
import authReducer from './auth.reducer';
import analysisReportsReducer from './AnalysisReports.reducer';
import titleAnalysisReducer from './TitleAnalysis.reducer';
import postsReportsReducer from './PostsReports.reducer';
const rootReducer = combineReducers({
form: formReducer,
routing: routerReducer,
auth: authReducer,
analysis: titleAnalysisReducer,
analysis_reports: analysisReportsReducer,
posts: postsReportsReducer
});
export default rootReducer;
It looks like your location object is scoped beneath the router.
Your test may be grabbing the window.location property, which your test suite may not replicate, assuming the test is cli and not in a browser.
Perhaps try:
<NavBar location={this.props.router.location.pathname} onLogoutClick={logout}/>
I'm using React and Redux, webSocket to deal with some server side events.
I'm able to dispatch actions from component assigning a function to the dispatcher via mapDispatchToProps() function.
But what about firing action outside the components? For instance at received webSocket's event.
Calling store.dispatch from another script will return a reference error (dispatch is not defined) even if the store is properly imported
Is there any way to do so?
Here is my app store configuration function:
import { createStore, combineReducers, applyMiddleware, compose } from 'Redux'
import thunk from '../../node_modules/redux-thunk/src/index'
import rootReducer from '../reducers/index'
const configureStore = (initialState) => {
return createStore(
rootReducer,
initialState,
compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
)
}
export default configureStore
here is App entry point where instanciate the store:
import React, { Component } from 'React'
import { render } from 'ReactDOM'
import { Provider } from 'ReactRedux'
import { Router, hashHistory } from 'ReactRouter' //browserHistory
import actions from './actions/actions'
import configureStore from './store/configureStore'
import routes from './routes'
const store = configureStore()
console.log('store log', store)
window.storeDebug = store.getState() // FIXME: disable in production
render(
<Provider store={store}>
<Router history={hashHistory} routes={routes} />
</Provider>,
document.getElementById('container')
)
How about using a custom Middleware ?
if (!window.location) {
// App is running in simulator
window.navigator.userAgent = 'react-native';
}
// note keep the following after the window if conditions
// https://github.com/facebook/react-native/issues/4393
const socketIO = require('socket.io-client/socket.io');
const WebSocketHandler = (store) => (next) => (action) => {
const socket = socketIO(CHAT_SERVER_ADDRESS, {
transports: ['websocket']
});
socket.on('YOUR_EVENT', (data) => store.dispatch(ACTION_CREATOR(data)));
}
and you just append the custom middleware in configureStore
I'm trying to write unit tests for a container component called AsyncApp but I get the following error "mapStateToProps must return an object. Instead received undefined."
This is my set-up.
Root.js
import configureStore from '../configureStore';
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import AsyncApp from './AsyncApp';
const store = configureStore();
export default class Root extends Component {
render() {
return (
<Provider store={store}>
<AsyncApp />
</Provider>
);
}
}
configureStore.js
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from './reducers';
const loggerMiddleware = createLogger();
const createStoreWithMiddleware = applyMiddleware(
thunkMiddleware
//loggerMiddleware
)(createStore);
export default function configureStore(initialState) {
return createStoreWithMiddleware(rootReducer, initialState);
}
AsyncApp.js
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { foo } from '../actions';
import FooComponent from '../components/FooComponent';
class AsyncApp extends Component {
constructor(props) {
super(props);
this.onFoo= this.onFoo.bind(this);
this.state = {}; // <--- adding this doesn't fix the issue
}
onFoo(count) {
this.props.dispatch(foo(count));
}
render () {
const {total} = this.props;
return (
<div>
<FooComponent onFoo={this.onFoo} total={total}/>
</div>
);
}
}
function mapStateToProps(state) {
return state;
}
export default connect(mapStateToProps)(AsyncApp);
I'm passing store directly to AsyncApp in my test to avoid getting the following Runtime Error : Could not find "store" in either the context or props of "Connect(AsyncApp)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(AsyncApp)".
The test isn't complete yet because I can't get past the mapStateToProps error message.
AsyncApp-test.js
jest.dontMock('../../containers/AsyncApp');
jest.dontMock('redux');
jest.dontMock('react-redux');
jest.dontMock('redux-thunk');
jest.dontMock('../../configureStore');
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
const configureStore = require( '../../configureStore');
const AsyncApp = require('../../containers/AsyncApp');
const store = configureStore();
//const asyncApp = TestUtils.renderIntoDocument(
//<AsyncApp store={store} />
//);
const shallowRenderer = TestUtils.createRenderer();
shallowRenderer.render(<AsyncApp store={store}/>);
I want to eventually test that AsyncApp contains a FooComponent, and that a foo action is dispatched when onFoo is called.
Is what I am trying to do achievable? Am I going about this the right way?
The suggestion I've seen in a few places is to test the non-connected component, as opposed to the connected version. So, verify that when you pass in specific props to your component you get the expected rendered output, and verify that when you pass in a state with a certain shape your mapStateToProps() returns the expected pieces. Then you can expect that they should both work correctly when put together.