Connect AddEditWord component to redux

Part ɪɪ: React-Native UI │Story 14 : Connect AddEditWord to redux to use redux store data and actions

GIT : Repo | Feature/Story branch| PR

In the previous post, we defined redux actions and reducer that we would need for CRUD operations with the word data.
In this post, we would update the AddEditWord component to connect to redux store and dispatch the actions required to add or update words data to our database table

Connect AddWords component to redux

📝 Create a file AddEditWordConnected.js under the folder src/screens/AddEditWord👇:

With this, the redux actions and state that we’ve mapped using mapStateToProps and mapDispatchToProps, would be available as component props. Note that we have mapped the selectedWord state prop from WordsReducer as wordToEdit prop of the component(line # 8 👆).

Next, update the AddEditWord component as below to use the redux state properties and dispatch mapped action functions on the respective events 👇

👆some changes we made to AddEditWord screen component:

– we got rid of showAlert variable from the component state as we are not going to show any alert on submit.
We also removed error state variable. Instead of this, we would use the error var from words reducer that we mapped to component prop error in mapStateToProps in AddEditWordConnected.

– we added componentWillReceiveProps lifecycle method. Here we call toastMessage method to show toast box if error prop has any value.

– in postWord method, we removed the call to showAlert and instead dispatch the appropriate redux action of either updateWord or addWord

Also, now for AddEditWord component, we will export its connected version instead of the standalone component. Update src/screens/index.js 👇

export { default as HomeScreen } from './Home/Home';
export { default as SignInScreen } from './SignIn/SignIn';
export { default as AddEditWordScreen } from './AddEditWord/AddEditWordConnected';

With this, we are finally ready to add a word to our database using the serverless API. Let’s see if it works.
Reload the app on the simulator.

First thing, user sign-in is working as expected. 👇

Ok, the User Sign-in using Google Auth seem to working fine.
And, let’s see now if add word to db is working?

⚠️ Oops! we got a 403 error when posting the word to db 👆

This is expected. We haven’t yet authenticated our app user to AWS and if you remember, when setting up the API, we have restricted it’s access to users authenticated with AWS IAM.

In the next part, we would see how to authenticate our Google user to AWS and get authorized to access the API with AWS Cognito Identity pool.

← Prev: Redux for words data ┈🏠┈ Next: Part III→