In version 2.x when you used the hoc withDataProvider and you used the dataProvider injected into the props, you could pass some extra options like onSuccess, onFailure and additionally using that dataProvider made sure all the proper redux actions were called. So you could see the loading indicator and whatnot.
Now with the new hook, you can no longer pass on those options. So you are forced to use also useNotify, useRefresh, etc.
I noticed that also no redux actions are being called.... so no loading indicator.
So basically my question is how to use the dataProvider and have it show the loading indicator, but it could be well be paraphrased as have it run all the redux actions that are normally ran when you use the default components like List or View
When migrating from 2.x to 3.x, you have to migrate your custom data provider.
If you had the old kind as specified in 2.x where you used constants:
switch() {
case MY_CUSTOM_ACTION:
}
Which was used like this:
dataProvider(MY_CUSTOM_ACTION...
This old way keeps working, however the redux actions are not dispatched.
Once you migrate into the new way of writing the data provider everything works as expected. https://marmelab.com/react-admin/DataProviders.html#data-providers
Related
I have a global toast, which I am opening using redux slice. I need to open the toast for error message when call from api fails in api-slice of rtk-query.
I have seen the answer, using store.dispatch method, but this causes dependency cycle. Is there a way to do this?
Yeah, you should always avoid directly importing the store into other application files.
Ideally, none of the rest of your code would ever need to refer to store directly.
Depending on where in the RTKQ setup you need to trigger this toast, you may have access to dispatch as part of the lifecycle function arguments.
In the worst case, you can use our fallback recommendation to inject the store into the necessary files from the app setup logic.
We are developing a React application using Redux to manage the state. In general, Redux serves us well, but in one part of the application, we are using WebSockets to update our app state to allow all the connected users to have the most recent version of the data.
It looks like this: https://i.stack.imgur.com/uNAsk.png
In a regular Redux application, we would have 3 actions: ACTION_LOADING, ACTION_SUCCESS and ACTION_FAILURE to handle HTTP requests. In this case, the state is updating automatically after receiving new data from the WebSocket.
Is it correct to have a Redux action (thunk) to post this data to the server even if it does not modify the state, or is it better to call the service without using Redux in these cases?
In case we create actions, what pattern would you recommend?
Thank you.
I would recommend wrapping it in a thunk for a couple of reasons:
There's nothing fatal about initiating an action that doesn't end up mutating state (for whatever reason).
Even if you aren't doing anything in the case of a successful POST (since all the action will come later via a message from the server), you still might need to dispatch an actions in case the POST fails for some reason.
It allows your components to use one consistent mechanism (action dispatch) rather than sometimes one way and sometimes another.
I'm using redux to load data from the backend in a react application. I'm loading a bunch of data with axios and then I can select one item and see the specific information in a different view. I'm rendering a "Loading" view every time I do a search in the backend. The problem is: this search is fine whenever I load the view refreshing the browser. But when I'm navigating in the own app, I use react-router-dom and I don't need to show the loading screen because it is already in the redux store.
Is there a way to tell redux or react to not make the async call if I already have the data?
Is redux-persist a solution for this? Should I do it manually with a condition in react?
I make the call in the componentDidMount method
You should pass the data from redux store down to your component as a property and you should make a check in componentDidMount or before that if data is empty or null or whatever and make a decision if you should load it after that. You don't need any 3rd party lib for data persistence (like redux-persist) since you actually have it in your redux store already persisted.
The plug-in documentation states:
When adding functionality to Griddle, you’ll likely need to response to actions and update the application state. This can easily be done by adding action handling functions to your reducer object.
I am writing a plug-in to replace the default Pagination with bootstrap styled Pagination. This will need access to getNext() getPrevious() and setPage() in actions. I can clearly see how to access these from inside the Griddle package as the local plug-in does.
I am unsure how I would access these functions and state from a plug-in written in my application.
What do I need to import from Griddle? What do I need to call?
Found it. In the Story Book, the custom page size settings story accesses the selectors and actions exports to give a plugin more direct access to the internals. The other stories around it do a fair job of demonstrating how to access Griddle internals from the a plugin.
Note that in addition to directly accessing the exported selectors and actions, both are available through React Context as well, e.g. in LocalPlugin.components.TableBodyContainer. Context should expose the "best" selectors/actions for the current <Griddle /> after plugins have been applied.
Some work was started in https://github.com/GriddleGriddle/Griddle/pull/743 to make selectors more composable, but the PR has gone stale.
I need to share some static data between my rails app and the redux-based front-end. The example in this case is a regular expression used by a helper method in the js and also in a controller in the rails app.
I feel it's annoying having to add something like this into the redux store since the store is not easily connected to from independent helper files in the js. Instead you would need to grab it in mapStateToProps, pass it as a prop into a presentational component, that would then send it through in an action, so that the code that handles actions (either in mapDispatchToProps or reducer) could send it through as a param when using the helper method.
Seems like a lot of unnecessary passing around for something that never changes. Are there any standards for static data provided by the server to be used in the front-end? Maybe adding something to the window object?
If its something that truly never changes, here are some ideas:
Have a configuration endpoint where you can get the regex and drop into redux state
Static config file that can be shared by JS/Ruby code
Hardcode the regex directly into the reducer's initialState
Create a javascript file and hardcode the regex directly into that file. Maybe put it in a file indicating its shared with the server.
Using the window object will make all serious react devs cringe a little. Eventually, that value could change, and it is going to cause bugs all over your app. If you are confident to make that gamble, then do it. Using the window object may make testing more difficult as well.