CoderslangJS

Now let’s add some starter code for the redux store. Install the redux, react-redux and redux-thunk libraries. In the src/external/redux/constants.js file create three constants ADD_LIST, LISTS, WORDS. The meaning of each constant must be the same as its name....

Let’s add the required constants to the file src/external/redux/constants. DELETE_LIST, DELETE_WORD - the value of all constants is equal to their name. Export two more functions from src/external/redux/actions: deleteWord, deleteList....

Add the constant SET_STORAGE_DATA to src/external/redux/constants, equal to its name. Add the readAsyncStorage function to the src/external/redux/actions file and export it. This method should return an asynchronous function with one dispatch argument....

Functions deletelistresult, deletewordresult, addlistresult, addwordresult should be exported from the src/external/redux/helpers file. deleteListResult must get a state and list to delete as arguments. This method must return the updated state, filtering the lists LISTS and WORDS....

Improve the reducer. By default, it must return the initial state. The case ADD_LIST should call the addListResult method, the case ADD_WORD: addWordResult. Cases DELETE_LIST and DELETE_WORD - deleteListResult and deleteWordResult, respectively....

You need to create folders: src/containers/Words/Word, src/containers/Words/Word/Details, src/containers/Words/Word/Option. In each bottom, you need index.js file to create the appropriate components. Let’s start with the Option component. It must return the Text element....

Now let’s work on the Details component. It should return the View element. For View, the marginVertical property must be 10. Inside the View, first add a Text element: for the detailsKey value defs - the inner text is Definition:,...

Now is the time to work on the Word component. It will expand and collapse word details. To do this, add a flag using the useState hook. The initial value is false....

To display the data, you must first prepare. To do this, export the preparedDetails function from the file: src/containers/Words/Word/helpers.js. This function must receive one meanings argument. meanings is an array of objects that describe a word....

We need to add one more, this time the last, component. Let’s create it in the src/components/AlertModal folder. This component must return the Modal element. The visible property should be cast into it, and the handleClose property should be passed into its onRequestClose property....