I have to do a project for an interview, and I´m a little bit lost on how to proceed. The project is basically a table with two user inputs and a select menu and, based on what the user selects and types, when “search” button is pressed, the App should fetch the matching results from an API JSON file and display it as a table. I know I can make a “big” presentational component with local state to store the inputs and the Select menu, and store whatever the users enters there, and then just dispatch that to the Redux store. But I don´t know how to get that info from the store to filter the data. How can I use Reselect and Redux Thunk to filter the API data when search is pressed?
I know I can make a “big” presentational component with local state to store the inputs and the Select menu, and store whatever the users enters there, and then just dispatch that to the Redux store.
Probably won’t get the job with that though.
But I don´t know how to get that info from the store to filter the data.
What filtering? I thought you said, “the App should fetch the matching results”. Is the backend providing the filtered data or are you doing it on the frontend?
Thunk is a great tool for dealing with async redux. You can do without it, but thunk makes it cleaner. It has nothing to do with filtering. Dealing with your api would be a great task for this, calling the api, then dispatching the correct action when the data comes back. Reselect is a cool tool for creating selectors. For example, this might be useful in your mapStateToProps to find the data you want in the state tree.
As far as filtering, if you actually need to do it in the client, there are a lot of places you can do this. You could handle it in the reducer, in mapStateToProp or even the render method. I often put it in a service layer, but that may be overkill here.
1 Like
Thanks for the reply. I have to use ReSelect and Thunk. I basically have to make an App that has two inputs and a select menu and, when a search button is pressed, it filters a file I get from an API and displays the matching data. How would you go about it, if I may ask? I´m a bit lost here. My main idea was to fetch the file, save it in the store and:
<App component which accesses the store and maps the state to props with the data, doesn´t display anything at first >
<Component with the inputs. Local state, and when search is pressed, they dispatch state to Props, trigger Reselect and cause the data to display in App>
</App component>
Well, I’m still not clear - you get all the data back from the api and have to filter that? I’ll assume that’s what you want.
For me, a basic app would be:
App ─┬─ Controls
└─ Display
I might further break those control and display components down.
Then you need to get the data. This is a great opportunity for a thunk. Thunk is middleware. Normally you issue an action object to redux. With a thunk (if I remember correctly) you send it a function that runs and then when it gets it’s async operation done, then it sends the action object. That would be to take the async data you just got and store it in the redux store. Again, assuming you are getting the data once, I would do this in componentDidMount of App or some other appropriate place. Extra points if you add spinners for when the data is loading.
Now, how to use reselect. I’ve only used it for selectors. I assume that’s what you’d use it for. For example, if you want your data and you’re doing something like this:
return request.success.ver1.result.data;
you can write a selector and do something like:
return dataSelector(result);
That has a few advantages. First, you get to hide some of the ugliness. Another advantage is that if you do this in many places in your code, and the shape of the data from the api changes, you only have to change it in one place. Selectors also come in handy in places like mapStateToProps, where you are passed a state object and need to find it on the right spot on the tree.
As to filtering. For a simple app, I might just do it in the render method. The criteria will be passed up to the Display component in props and I can filter there. You can also do it in the reducer if you want. Can reselect help? I’m not sure. Do some research.