I would like to enable Hot Module Replacement in my Web App, so I can speed up my development time.
I followed this article: https://duske.me/setting-up-hot-module-replacement-with-create-react-app-and-redux/
And i re-wrote my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {render} from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {Provider,connect} from 'react-redux';
import FirebaseConfig from './FirebaseConfig';
import firebase from 'firebase';
import configureStore from './configureStore';
firebase.initializeApp(FirebaseConfig);
const store = configureStore();
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
serviceWorker.unregister();
and I have created a configureStore.js :
import {createStore,applyMiddleware} from 'redux';
import reducer from './reducers';
import thunk from 'redux-thunk';
import {composeWithDevTools} from 'redux-devtools-extension' // REDUX DEVTOOLS
const configureStore = ()=> {
const store = createStore(reducer,composeWithDevTools(applyMiddleware(thunk)));
if (module.hot) {
module.hot.accept('./reducers/index', () => {
const nextRootReducer = require('./reducers/index').default;
store.replaceReducer(nextRootReducer);
});
}
return store
}
export default configureStore;
PS. 'reducers/index.js' is the file where I have a default export for my rootreducer (achieved by combining all reducers with combineReducers())
But nothing seems to work.
Did I miss something ?
Related
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
)
store.js
import { createStore, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import { bookReducers } from './reducers/bookReducers'
const reducer = combineReducers({
book: bookReducers,
})
const middleware = [thunk]
const initialState = {
books: [],
isLoading: false,
eror: '',
}
const store = createStore(
reducer,
initialState,
composeWithDevTools(...middleware)
)
export default store
error I got in my console
I got this error from provider component while adding prop store but its the same as in redux docs . what is happening here
I just completed the redux-tutorial and trying to see the state in the redux-devtools. But the redux-devtools is inactive in the extensions bar and when I clicked it it shows menu
"to right, to left etc". When I choose on of the options it show data in the state which is not exist. Here is my index.js file
import React from 'react';
import {render} from 'react-dom';
import './index.css';
import { createStore } from 'redux'
import App from './components/App';
import rootReducer from './reducers';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux';
const store = createStore(rootReducer)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
serviceWorker.unregister();
add REDUX_DEVTOOLS_EXTENSION in the createStore
const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
I want to set headers in the request using Axios interceptor I have read the Axios documentation and I am doing this for that:-
import React from 'react'
import ReactDOM from 'react-dom'
import App from './scenes/App'
import {Provider} from 'react-redux'
import {createStore,applyMiddleware,compose} from 'redux'
import reduxThunk from 'redux-thunk'
import axios from 'axios'
import reducers from './services/store/reducers'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(
reducers,
composeEnhancers(applyMiddleware(reduxThunk))
)
axios.interceptors.request.use(request=>{
console.log("here")
console.log(request)
return request;
})
ReactDOM.render(
<Provider store = {store}>
<App/>
</Provider>
,document.querySelector('#root'))
The thing is this request function is not running . Where am I going wrong ?? Do I need to do any other setup for Axios interceptor??
Im trying to migrate from react-redux v2 to v3 and start to use the ReactReduxFirebaseProvider. But I don't know why I get:
Line 22: 'firebase' is not defined no-undef
This is my code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './store/reducers/rootReducer'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { createFirestoreInstance, getFirestore } from 'redux-firestore'
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase'
import fbConfig from './config/fbConfig'
const store = createStore(rootReducer,
compose(
applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore }))
)
);
const rrfProps = {
firebase,
config: fbConfig,
dispatch: store.dispatch,
createFirestoreInstance
}
ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
</Provider>, document.getElementById('root'));
registerServiceWorker();
Can someone point me in the right direction of what I am doing wrong?
Include this in your code:
import firebase from 'firebase/app'
I tried to create a simple react-redux-ajax working example, following Reddit API tutorial, but I get this error:
Uncaught Error: Actions may not have an undefined "type" property. Have you misspelled a constant?
The error is thrown by:
dispatch(fetchProducts(this.props)); in App.jsx
index.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { compose, createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import { createDevTools, persistState} from 'redux-devtools';
import DevTools from './DevTools.jsx';
import App from './App.jsx';
import rootReducer from './reducers.js';
const loggerMiddleware = createLogger();
function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
DevTools.instrument(),
applyMiddleware(
thunkMiddleware,
loggerMiddleware
),
// Lets you write ?debug_session=<name> in address bar to persist debug sessions
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)
}
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementsByClassName('products')[0]);
You just forgot to compose your enhancers, the third argument to createStore must be a function so you need to compose all your enhancers to provide a unique enhancer :
index.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { compose, createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import { createDevTools, persistState} from 'redux-devtools';
import DevTools from './DevTools.jsx';
import App from './App.jsx';
import rootReducer from './reducers.js';
const loggerMiddleware = createLogger();
function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
compose(
applyMiddleware(
thunkMiddleware,
loggerMiddleware
),
DevTools.instrument(),
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)
)
}
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementsByClassName('products')[0]);
Redux DevTool doc