Comments (18)
If we wanted to support this, here is an idea:
Export a special configureMiddleware
value from redux-starter-kit
(e.g., a symbol). If configureMiddleware
is found in the enhancers
array, apply middleware at that point; otherwise, apply middleware first.
import { configureStore, configureMiddleware } from 'redux-starter-kit'
configureStore({
reducer,
// enhancer comes after middleware, as before
store: [enhancer]
})
configureStore({
reducer,
// middleware comes after enhancer
store: [enhancer, configureMiddleware]
})
configureStore({
reducer,
// middleware comes after enhancer1, before enhancer2
store: [enhancer1, configureMiddleware, enhancer2]
})
from redux-toolkit.
Resolved this by adding the callback idea for enhancers
suggested by @phryneas .
from redux-toolkit.
Out of curiosity, what other enhancers do you have that are generating actions?
from redux-toolkit.
Hmm. Okay, so yeah, looking at the redux-first-router
docs, they really do want their enhancer to be in front of the middleware.
My first instinct is that the point of redux-starter-kit
is to be reasonably opinionated, and the point of configureStore()
is to keep the end user from having to fiddle around with the store setup process. In almost every Redux app I've seen, applyMiddleware
comes first. I'd say that if you need to care about the order of enhancers that way, you're probably better off writing the store setup logic by hand.
from redux-toolkit.
This is the only one for me it is not a problem to write few lines of code that never change. I just wanted to point that out for consideration.
from redux-toolkit.
My company's also using redux-first-router
, so we're not able to use configureStore
because of that.
Do any other projects break if enhancers come first?
from redux-toolkit.
I suppose that's a possibility. Could accept a PR that adds that.
from redux-toolkit.
Just a thought. This looks worse then original config. Why not let the possibility to just configure store as you would in redux normally. For "advanced" uses.
from redux-toolkit.
@primozs : if you want to configure the store "normally", there's nothing stopping you from using createStore()
yourself directly. That's kind of the point. This is meant for the 80% use case
from redux-toolkit.
@markerikson I got confused when I saw only some parts of redux re exported.
Cheers
from redux-toolkit.
The same problem happens with the enhancer of the redux-offline
. Thumbs up for something like this!.
I created a ticker for that one: #184
from redux-toolkit.
I'm not particularly sold on the "magic applyMiddleware
symbol" API design idea. Does anyone have any other alternatives?
from redux-toolkit.
Hmm. We currently have https://redux-starter-kit.js.org/api/getDefaultMiddleware . Maybe we need a getDefaultEnhancers()
function too?
from redux-toolkit.
What about accepting a callback as enhancers
, with the applyMiddlewares
enhancer as argument?
function configureStore({
// A single reducer function that will be used as the root reducer,
// or an object of slice reducers that will be passed to combineReducers()
reducer: Object<string, ReducerFunction> | ReducerFunction,
// An array of Redux middlewares. If not supplied, uses getDefaultMiddleware()
middleware?: MiddlewareFunction[],
// Enable support for the Redux DevTools Extension. Defaults to true.
devTools?: boolean | EnhancerOptions,
// Same as current createStore.
preloadedState?: State,
// An optional array of Redux store enhancers
enhancers?: ReduxStoreEnhancer[] | (defaultEnhancer: ReduxStoreEnhancer) => ReduxStoreEnhancer[],
})
from redux-toolkit.
Mmm... not sure I like the callback idea either. I'm definitely leaning towards getDefaultEnhancers()
at this point.
from redux-toolkit.
But wouldn't the getDefaultEnhancers()
result contain the middlewareEnhancer
and thus not be available without knowing of the middlewares?
So you'd have to pass in the middlewares and end up with something like this:
const middlewares = [ ..., getDefaultMiddlewares(), ... ];
const store = configureStore({
middlewares,
enhancers: [ ..., getDefaultEnhancers(middlewares), ... ]
})
Having to pass in the middlewares at two different places would make it impossible to write the middlewares inline.
from redux-toolkit.
Hmm. Excellent point.
Okay, I see what you're getting at with the callback thing. In that case, would it make sense to do that for both middleware and enhancers, and drop getDefaultMiddleware
?
We're still 0.x, so we're semantically allowed to make whatever breaking changes we want, but I'd obviously like to minimize churn overall.
FWIW, I see a number of folks calling getDefaultMiddleware
already:
https://github.com/search?l=JavaScript&q=getdefaultmiddleware&type=Code
from redux-toolkit.
Either that, or enable both the current behaviour and the callback option.
That might have not been clear from my initial post:
My initial idea was to allow either passing in an array (which would put the enhancers behind the middleware, so the current behaviour) or optionally passing the callback for more control.
Similarly, middlewares
could either receive an array (which would replace all middlewares, but be used with a - potentially deprecated - getDefaultMiddleware call) or passed a callback function.
from redux-toolkit.
Related Issues (20)
- remove implicit conversion to camel case of openapi operation id. HOT 3
- RTK purges the data even if white listed HOT 1
- Error: Unexpected token: operator (?) in file node_modules/@reduxjs/toolkit/dist/query/cjs/rtk-query.production.min.cjs at 878:32 HOT 2
- RTK Optimistic Updates in "Select" element default value not working without refreshing page HOT 3
- How to dispatch from one slice to another slice to update the state data HOT 3
- Redirect Endpoint? HOT 1
- electron app dispatch event on new ipc message does not working HOT 1
- Option to provide an initial data to the query endpoint HOT 26
- Include UMD build artifacts for latest release HOT 1
- Unhandled JS Exception: Cannot read property 'prototype' of undefined HOT 2
- Add SWR comparison HOT 2
- isFetching does not seem to act like document suggests. HOT 5
- Documentation for Persistence and Rehydration HOT 1
- Inconsistency in Documentation of Quick Start HOT 1
- RTKQ: Delayed invalidationBehavior issue with long running queries HOT 4
- onQueryStarted RTK Query triggers twice HOT 1
- /dist/query/react is not exported from package @reduxjs/toolkit HOT 1
- Query + Mutation hooks are not being generated... HOT 2
- How to set `extra` when use RTK query hooks? HOT 1
- Retry always returns 500 and internal server error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from redux-toolkit.