Add redux store, actions and reducers for words data
Part ɪɪ: React-Native UI │Story 13 : Add redux actions and reducers related to CRUD operations to words table
GIT : Repo | Feature/Story branch| PR
In the previous post, we installed and configured Amplify SDK that we would use to make async Ajax calls to our serverless API. We installed redux-thunk and created Navigation Service that would allow us to access our app’s top-level navigator from anywhere including redux actions. With this we can now trigger navigation to any screen from redux actions.
In this post, we would set up the redux store, actions and reducers that we will need to store our words data as app-level state and perform CRUD operations to the words table.
Define Action Types constants
Let’s begin with defining the constants/enums for the events associated with the CRUD operations to words data.
Add below to the src\redux\actions\actionType.js file:
Common function to create action:
📄 Add a new file: src\redux\actions\createAction.js
👆we added a common createAction function that we would use in our actions files to dispatch actions in our redux-thunk actionCreators.
Actions for CRUD operations with words collection
📂 Add a new folder: src\redux\actions\WordsActions📄 Add a new file: src\redux\actions\WordsActions\WordsActions.js👇
( URLs of our Serverless API can be obtained from what we noted down here)
👆We defined action functions that we would like to dispatch for the various events related to CRUD operations with vocab_words data.
👉 Note how we are using NavigationService that we created above, to navigate to Home screen after the addWord or updateWord action completes. 👉 Also note the use of API from Amplify to make http calls to our serverless API.
Reducers for words collection
👆reducer function to handle various words actions.
Add wordsReducer to the combined/root reducer:
📝 Edit the file src/redux/reducers/index.js as below👇:
Alright, so we defined the actions and reducers that we would need for CRUD operations with the word data.
In the next post, we would update the AddEditWord components to connect to redux store and dispatch the actions required to add or update words data.
← Prev: Amplify SDK┈🏠┈ Next: AddEditWord component connected→
