Here we create a store and i also try + window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION()
import { createStore } from "redux";
import reducer from "./reducer";
import { devToolsEnhancer } from 'redux-devtools-extension';
const store = createStore(reducer ,devToolsEnhancer({ trace: true, traceLimit: 40 }));
export default store;
Related
WARNING in ./node_modules/#redux-saga/core/dist/redux-saga-core.esm.js 1343:21-28
"export 'compose' was not found in 'redux'
# ./node_modules/redux-saga/dist/redux-saga-core-npm-proxy.esm.js
# ./src/store.js
# ./src/App.js
# ./src/index.js
WARNING in ./src/store.js 6:21-32
"export 'createStore' was not found in 'redux'
# ./src/App.js
# ./src/index.js
I'm facing the problem of creating a redux store. Here, I've added the sample code. If I remove the provider from App.js, it's working fine. Can anyone please help me to resolve this issue?
App.js
import React from 'react';
import Layout from './components/Layout';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './store'
const App = () => {
return (
<Provider store={store}>
<BrowserRouter>
<Layout/>
</BrowserRouter>
</Provider>
);
}
export default App;
store.js
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import reducers from './redux';
import sagas from './sagas';
const sagaMiddleware = createSagaMiddleware()
export const store = createStore(
reducers,
applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(sagas)
reducer
import { combineReducers } from 'redux';
import { reducer as auth } from './AuthRedux'
const reducers = combineReducers({
auth
});
export default reducers;
sagas
import { takeLatest, all } from 'redux-saga/effects';
import api from '../middleware/api';
import { AuthTypes } from '../redux/AuthRedux'
import { signupSaga } from './AuthSaga'
export default function * root () {
const sagaIndex = [
yield takeLatest(AuthTypes.SIGNUP, signupSaga, api),
];
yield all(sagaIndex)
}
I guess it has something to do with the redux and how I import stuff, but I'm not sure what's wrong there.😩😩
Thanks
In the store.js replace
export const store = createStore(
reducers,
applyMiddleware(sagaMiddleware)
)
with
export const store = createStore(
reducers,
{},
applyMiddleware(sagaMiddleware)
)
Just an arrow in the dark coz it worked for me maybe it should work for you
React router works normal. But if I add <Redirect> or call from <Link>, I have this exception:
Uncaught Could not find router reducer in state tree, it must be mounted under "router"
rootReducer.js:
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import counterReducer from './Counter/counter.reducer';
import sidebarReducer from './Sidebar/sidebar.reducer';
export default (history) => combineReducers({
router: connectRouter(history),
counter: counterReducer,
sidebar: sidebarReducer,
});
store.js:
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import createRootReducer from './rootReducer';
export const history = createBrowserHistory();
export default function configureStore(preloadedState) {
const composeEnhancer = compose
const store = createStore(
createRootReducer(history),
preloadedState,
composeEnhancer(
applyMiddleware(
routerMiddleware(history),
),
),
);
if (module.hot) {
module.hot.accept('./rootReducer', () => {
store.replaceReducer(createRootReducer(history));
});
}
console.log(store.getState());
return store;
}
Check the history documentation. If you're using react-router-dom#5.x.x then you should use history#4.10.1 because the latest version of history (v5) only works with react-router-dom#6.x.x
I am working on Log in authentication. After user logged in successfully I want to show log out button based on token value in the state. User gets logged in successfully But actually state is empty and have no values which are passed from express server. So if state token property is empty it does not show log out button after logged in .
api code
import axios from 'axios'
export default {
user:{
login:(credential) => axios.post('/api/auth',{credential}).then(res => res.data.user)
}
}
action code
import {USER_LOGGED_IN} from '../types'
import api from '../api'
export const userLoggedIn = user => ({
type: USER_LOGGED_IN,
user
});
export const login = (credential) =>(dispatch) => api.user.login(credential).then(user => dispatch(userLoggedIn(user)))
type code
export const USER_LOGGED_IN = 'USER_LOGGED_IN'
user reducer
import { USER_LOGGED_IN } from "../types";
export default function user(state ={}, action = {}) {
switch (action.type) {
case USER_LOGGED_IN:
return action.user;
default:
return state;
}
}
rootReducer
import { combineReducers } from "redux";
import user from "./reducers/user";
// import books from "./reducers/books";
export default combineReducers({
user:()=>({
})
});
HomePage
import React from 'react'
import {connect} from 'react-redux'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
function HomePage({isAuthenticated}) {
return (
<div>
<h1>Home Page</h1>
{ isAuthenticated ? <button>Logout</button> : <Link to ="/login">Login</Link>}
</div>
)
}
HomePage.propTypes ={
isAuthenticated:PropTypes.bool.isRequired
}
function mapStateToProps(state){
console.log(state.user.token); // this shows undefined
return{
isAuthenticated:!!state.user.token
}
}
export default connect(mapStateToProps)(HomePage)
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import 'semantic-ui-css/semantic.min.css'
import {createStore,applyMiddleware} from 'redux'
import {Provider} from 'react-redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'
import App from './App';
import * as serviceWorker from './serviceWorker';
import rootReducer from './rootReducer'
const store = createStore(rootReducer,composeWithDevTools(applyMiddleware(thunk)))
ReactDOM.render(<BrowserRouter><Provider store={store}><App /></Provider></BrowserRouter>, document.getElementById('root'));
serviceWorker.unregister();
update rootreduer file to
import { combineReducers } from "redux";
import user from "./reducers/user";
// import books from "./reducers/books";
export default combineReducers({
user
});
Actually you are not providing your user reducer in combine reducers, you can do as
import { combineReducers } from "redux";
import user from "./reducers/user";
export default combineReducers({
user
})
});
Hope it helps
I am trying to get React app to work properly with React Router and Redux, but I constantly getting TypeError: Cannot read property 'location' of undefined to any components that have redux. I am using connected-react-router lib to register router in the store but apparently I did something wrong
store/configureStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import reducer from '../reducers';
import { persistStore } from 'redux-persist';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from "connected-react-router";
let _persistor;
let _store;
export const history = createBrowserHistory();
export const getStore = (props) => {
if (_store) {
return _store;
}
const initialState = (props) ? {...props} : {};
_store = createStore(
reducer,
initialState,
compose(
applyMiddleware(routerMiddleware(history)),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
),
);
_persistor = persistStore(_store);
return _store;
};
export const getPersistor = () => {
return _persistor;
};
reducers/index.js
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import Menu from './Menu';
import SelectedServices from './SelectedServices';
import { connectRouter } from 'connected-react-router'
import { history } from "../store/configureStore";
const rootReducer = (history) => combineReducers({
router: connectRouter(history),
menu: Menu,
selectedServices: SelectedServices,
});
const reducer = persistReducer(
{
key: 'root',
storage: require('localforage'),
whitelist: [],
},
rootReducer(history),
);
export default reducer;
After three hours of debugging and reading more about each library of connected-react-router, react-redux, and react-router-dom I found one line which I skip several times, but eventually I checked it in my package.json. At current moment:
v6.0.0 requires React v16.4.0 and React Redux v6.0. (It does not support React Redux v7.0 yet. We're looking into the compability issue.)
I was using react-redux: v7.0.1 which a real facepalm to my self. So I downgraded to v6 and everything start works fine.
This is subsequent to the thread I posted here
After lot of troubleshooting I found that this code works without any problems
import React from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import createLogger from 'redux-logger';
import thunkMiddleware from 'redux-thunk';
import { Provider } from 'react-redux';
import DataTableReducer from './reducers/DataTableReducer';
import DimensionPickerReducer from './reducers/DimensionPickerReducer';
const loggerMiddleware = createLogger();
const store = createStore(
DimensionPickerReducer,
applyMiddleware(
thunkMiddleware,
loggerMiddleware
)
);
export default store;
But if I replace my single reducer with a combine reducer call like
import React from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import createLogger from 'redux-logger';
import thunkMiddleware from 'redux-thunk';
import { Provider } from 'react-redux';
import DataTableReducer from './reducers/DataTableReducer';
import DimensionPickerReducer from './reducers/DimensionPickerReducer';
const loggerMiddleware = createLogger();
const store = createStore(
combineReducers({
DataTableReducer,
DimensionPickerReducer
}),
applyMiddleware(
thunkMiddleware,
loggerMiddleware
)
);
export default store;
I immediately start getting errors by the DimensionPicker control that the mandatory props were not specified.
So the combineReducer method is not working for me.
I am uploaded a sample project here which shows the problem.
https://github.com/abhitechdojo/MovieLensReact
You will have to run npm install after doing a git clone
With combined reducers your store will have data structure like that:
{
DimensionPickerReducer: {
dimenisionName: '',
pickerIsLoading: false,
pickerError: '',
currentAttribute: '',
attributeList: []
},
DataTableReducer: {
tableData: [],
tableIsLoading:false,
tableError: ''
}
}
So you should adjust your containers to work with combined store. For example in DimensionPickerContainer.js you should change mapStateToProps function:
const mapStateToProps = (state) => {
return {
attributeList : state.DimensionPickerReducer.attributeList,
currentAttribute : state.DimensionPickerReducer.currentAttribute
}
}
You can also name your reduces in store, so they would not look ugly in data structure. E.g. combineReducers({ dimensionPicker: DimensionPickerReducer, dataTable: DataTableReducer})