I wrote a test in react, which of the strong will help with the assessment?

Question

React

The people who can help, wrote a small simple test task on react-redux . But the employer was frostbitten, even the callback, according to him, for errors was not sent. Can you tell me the code is completely badly written? I apply for a vacancy for a junior +
The project
itself

The application can create entries, mark them as important, show only important ones, search for entries

Answer 1

1. React.StrictModemissing.
2. It is not clear why you Appsubscribe to changes storeand update the state with them.
3. All component files are named with a small letter, but it would be better with a capital letter.
4. All styles are described in the file src/style.css, but it would be necessary to separate them for each component. I would break it into modules .
5. Use the extension .jsxonly for components. Do you have logic files that have this extension. 6. In order not to pass the Redux store down the chain to other components, use the connect
function . 7. Meaning about what type of entities and filter by them ( important or not important ;
filter ), it is better to take it out in Redux, or by composition in the parent component.
8. In sirch-panel.jsx(and even better SearchPanel.jsx) it would be better to store only the value of the field for the new entity as a state.
9. Redux events - I think it's better to put the constants in a separate file ( action types ), and arrange the events themselves without store.dispatch. Event dispatching can be transferred to the same connect (you can even use bindActionCreators ).
10. Reducer - even if the event is not given by the reducer, then you return a new state. It's better to move the state modification code into the switch. You can use the array method to delete .filter. To mark importantyou can use the array method .map. And in general, move it to a separate directory, because it is not a component (like action creators ).
11. In order not to write such constructions:

className={important ? "important list-item" : "list-item"}

you can use classnames or clsx .
12. Read about useCallback . Some event handlers can be improved with this hook.
13. You use different ways to export components: default export and named export . Probably, in order not to be confused in the future, one should use one option.
14. No saving data between sessions. Use localStorage to get started .
15. If you use data persistence, you will have a problem with entity IDs. id: idCountercan be replaced by Date.now().