I am developing my project using React and Redux. I am getting below error when I run my project after few days later. Could anyone say why I am getting below error.
This is how I configure redux store:
const enhander = compose(applyMiddleware(...featureMiddleware, ...coreMiddleware, logger, thunk));
export const store = createStore(rootReducer, {}, enhander);
The only difference is I provide an initial state which is an empty object
Greetings.
Related
I am using redux, react-redux and redux thunk for store management in my react native project, there is deferent reducers and actions. How I reset the entire store during logout
Is there any methods like createStore() to destroy a store?
please share possible solutions
Thanks
The below solution worked for me,
import reduxReset from 'redux-reset'
const enHanceCreateStore = compose(
applyMiddleware(thunk),
reduxReset()
)(createStore)
const store = enHanceCreateStore(reducers)
dispatch reset action
store.dispatch({
type: 'RESET'
})
Merry Chrismas...
I got a React project structured like below
- My project
|- common (redux and redux-persist installed)
|- mobile (... with react-native init)
|- web (... with create react app)
I tried then to import a basic redux from common in mobile and got an error
Here's the code
import default_storage from "redux-persist/lib/storage"
import default_storage from "redux-persist/lib/storage";
import thunk from "redux-thunk";
...
export default (storage = default_storage) => {
const store = createStore(
combineReducers({
auth: persistReducer(
{ key: "auth", storage},
authReducer
),
event: eventReducer,
}),
applyMiddleware(thunk)
);
return store
};
...
When I try to call the function in mobile passing AsyncStorage as parameter
I got an error saying the function couldn't compile because of the fact that there's no part of common that can compile the native part of AsyncStorage.
I tried first with adding fields resolve in babel.config.js but it actually doesn't work
If someone already did this kinda Structure before, would you share ya code please. Just how to structure the code
Thanks guys
I was following a React Native tutorial.
I was trying to connect it to React Native Debugger app.
But then I got "Expected the reducer to be a function" error.
It says here that it is caused by {} around the module I'm importing.,
Expected the reducer to be a function
So I did fix it by removing {}
Basically, it works when import composeWithDevTools and it errors when import {composeWithDevTools} when connected to React Native Debugger.
But I cannot understand why!
The tutorial I'm following works totally fine with import {composeWithDevTools} when connected to React Native Debugger.
It works fine when NOT connected to React Native Debugger.
Is this an error on React Native Debugger? Why does this happen?
Edit: I re-started metro many times. It always produces the same result.
import { createStore, combineReducers } from 'redux';
import userReducer from './reducers/user';
import composeWithDevTools from 'redux-devtools-extension';
const rootReducer = combineReducers({
user: userReducer,
});
const store = createStore(rootReducer, composeWithDevTools);
export default store;
Turns out the error came from a different place than what the debugger pointed to.
Problem is here. const store = createStore(rootReducer, composeWithDevTools);
This should be
const store = createStore(rootReducer, composeWithDevTools());
with () added at the last argument.
It's good to follow documentation
You need the curly bracket. If it's behaviour is weird, or you have just installed a new package, maybe it's a good habit to restart the metro.
The new redux has a template built in for store and all the necessary thing to start a react redux app but it is using redux-thunk under the hood to make async calls. It it not possible to replace this with redux-saga instead of thunk.
Redux Toolkit allows you to customize the list of middleware you're using using the middleware option of configureStore, same as if you're creating a Redux store with the base createStore API.
You can completely replace the default list of pre-defined middleware by providing your own middleware array, or call getDefaultMiddleware() and add your own middleware to the array and use that.
So, my advice would be to do:
const store = configureStore({
reducer: rootReducer,
middleware: getDefaultMiddleware().concat(sagaMiddleware)
})
I have an Electron desktop application containing a React + Redux app. Redux works fine whilst running the app locally in development, but does not update components once the app has been built to a native desktop app.
Many articles and issues seem to think that the store is configured incorrectly, or that I am mutating state directly rather than updating it, or that my mapStateToProps function is not set up correctly.
I can't see how any of these can be an issue, as my app works during development, and I can see the store be updated and the component re-renders.
In production though, the following happen:
The store state is initialized
An action is dispatched
The state updates ( I can see in the dev tools )
None of my connected components re-render with updated props.
The only difference I can see between development and production is that within Electron, during dev the app is loaded via http://localhost, and during production it is loaded via file:///
My store is configured as:
export const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));
The store is provided as:
<Provider store={store}>
<App />
</Provider>
I am connecting my component to the store as:
const mapStateToProps = (state: RootState) => {
return {
hasLoaded: state.products.hasLoaded,
products: state.products.products
};
};
const mapDispatchToProps = {
getProducts: getProducts
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(ProductsList);
Then calling getProducts from within the component like:
componentDidMount() {
this.props.getProducts();
}
I expect the state to be updated with the retrieved products, and then the component should re-render with the updated store state as props.
Instead, the store state is updated - as I can see it in Redux DevTools - but the connected component never re-renders, nor does componentDidUpdate get called.
I spent many days with the same feeling and issue that you did. After detecting that in production the subscribe function from redux still worked, but react-redux was unable to connect properly, I tried downgrading and it worked.
Can you try just removing composeWithDevTools?
export const store = createStore(rootReducer, applyMiddleware(thunk));
The example below uses the React application store. It also doesn't work with Redux devtools.
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
I removed this part before production build because it required a browser dev plugin; I hope React Native will be the same.
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
Adding the following to electron-webpack.config.json solved the issue, react-redux has to be whitelisted.
{
"whiteListedModules": ["react-redux"]
}