App.tsx
file.src/App.tsx
:store
is instantiated.Splashscreen.hide()
hides the splash screen on component mount via useEffect
hook.<MainNavigator />
<Provider />
connects your app with the Redux store
.src/App.tsx
handles all the bootstrapping and setup of the features we are using in the boilerplate. Now, let's review a summary of the building blocks.store
is the heart of your application. Check out src/store/configureStore.ts
to see how we have configured the store.createStore()
factory creates the Redux store and accepts three parameters.redux-logger
middleware, it will listen to all the actions being dispatched to the store and print the previous and next state in the browser console. It's helpful to track what happens in your app.redux-saga
: Used for managing side-effects such as dispatching actions asynchronously or accessing browser data.The official, opinionated, batteries-included toolset for efficient Redux development.
{ id: number, username: string, gender: string, age: number }
.createSelector()
.redux-saga
for side-effect management. Too much jargon? Let's simplify.API_REQUEST
: Upon dispatching this, your application should show a spinner to let the user know that something's happening.API_SUCCESS
: Upon dispatching this, your application should show the data to the user.API_FAILURE
: Upon dispatching this, your application should show an error message to the user.redux-saga
enters the picture.redux-saga
is a Redux middleware, which means this thread can be started, paused, and canceled from the main application with standard Redux actions. It has access to the full Redux application state, and it can dispatch Redux actions as well.yarn init-husky
. If you'd like to disable it or modify its behavior, take a look at the lint-staged
section in package.json
.