**Course Title:** Building Mobile Applications with React Native **Section Title:** State Management with Redux **Topic:** Implement Redux in an application to manage global state for user authentication. In this lab topic, we will implement Redux in a React Native application to manage global state for user authentication. We'll create a simple authentication system that allows users to log in and out, and we'll use Redux to manage the global state of the application. **Why Use Redux for Authentication?** Redux is a state management library that helps you manage global state by providing a single source of truth for your application's state. In an authentication system, you need to manage the user's authentication status across multiple components and screens. Redux makes it easy to manage this global state and provides a predictable way to update the state. **Step 1: Create a New React Native Project** If you haven't already, create a new React Native project using the React Native CLI: ```bash npx react-native init AuthApp ``` **Step 2: Install Redux and Redux-Thunk** Install Redux and Redux-Thunk using npm or yarn: ```bash npm install redux react-redux redux-thunk ``` **Step 3: Create the Redux Store** Create a new file called `store.js` in the root of your project: ```javascript // store.js import { createStore, applyMiddleware } from 'redux'; import { persistStore, persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web and AsyncStorage for react-native import thunk from 'redux-thunk'; import rootReducer from './reducers'; const persistConfig = { key: 'auth', storage, }; const persistedReducer = persistReducer(persistConfig, rootReducer); const store = createStore(persistedReducer, applyMiddleware(thunk)); const persistor = persistStore(store); export { store, persistor }; ``` In this code, we create a new Redux store with the `createStore` function from `redux`. We also use `persistReducer` from `redux-persist` to persist the state to storage. We'll use `AsyncStorage` for storage in this example. **Step 4: Create the Authentication Reducer** Create a new file called `authReducer.js` in the `reducers` folder: ```javascript // reducers/authReducer.js const initialState = { isSignedIn: false, username: '', token: '', }; const authReducer = (state = initialState, action) => { switch (action.type) { case 'SIGN_IN': return { ...state, isSignedIn: true, username: action.username, token: action.token, }; case 'SIGN_OUT': return initialState; default: return state; } }; export default authReducer; ``` In this code, we define the initial state of the authentication system and the reducer function that updates the state based on actions. **Step 5: Create the Root Reducer** Create a new file called `index.js` in the `reducers` folder: ```javascript // reducers/index.js import { combineReducers } from 'redux'; import authReducer from './authReducer'; const rootReducer = combineReducers({ auth: authReducer, }); export default rootReducer; ``` In this code, we combine the authentication reducer with the root reducer using `combineReducers`. **Step 6: Connect the Redux Store to Your Components** Create a new file called `App.js` in the root of your project: ```javascript // App.js import React from 'react'; import { Provider } from 'react-redux'; import { store, persistor } from './store'; import Navigation from './Navigation'; const App = () => { return ( <Provider store={store}> <Navigation /> </Provider> ); }; export default App; ``` In this code, we wrap the `Navigation` component with the `Provider` component from `react-redux` and pass the Redux store as a prop. **Step 7: Create the Sign In and Sign Out Actions** Create a new file called `authActions.js` in the `actions` folder: ```javascript // actions/authActions.js import { SignIn, SignOut } from './types'; export const signIn = (username, token) => { return { type: SignIn, username, token, }; }; export const signOut = () => { return { type: SignOut, }; }; ``` In this code, we define the sign in and sign out actions. **Step 8: Create the Sign In and Sign Out Screens** Create two new files called `SignInScreen.js` and `SignOutScreen.js` in the `screens` folder: ```javascript // screens/SignInScreen.js import React, { useState } from 'react'; import { View, Text, TextInput, Button } from 'react-native'; import { signIn } from '../actions/authActions'; const SignInScreen = ({ navigation }) => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleSignIn = () => { signIn(username, ' token'); navigation.navigate('Home'); }; return ( <View> <Text>Sign In</Text> <TextInput value={username} onChangeText={(text) => setUsername(text)} placeholder="Username" /> <TextInput value={password} onChangeText={(text) => setPassword(text)} placeholder="Password" /> <Button title="Sign In" onPress={handleSignIn} /> </View> ); }; export default SignInScreen; ``` ```javascript // screens/SignOutScreen.js import React from 'react'; import { View, Text, Button } from 'react-native'; import { signOut } from '../actions/authActions'; const SignOutScreen = ({ navigation }) => { const handleSignOut = () => { signOut(); navigation.navigate('SignIn'); }; return ( <View> <Text>Sign Out</Text> <Button title="Sign Out" onPress={handleSignOut} /> </View> ); }; export default SignOutScreen; ``` In this code, we create the sign in and sign out screens. **Step 9: Create the Navigation** Create a new file called `Navigation.js` in the `screens` folder: ```javascript // screens/Navigation.js import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import SignInScreen from './SignInScreen'; import SignOutScreen from './SignOutScreen'; import HomeScreen from './HomeScreen'; const Stack = createStackNavigator(); const Navigation = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="SignIn" component={SignInScreen} /> <Stack.Screen name="SignOut" component={SignOutScreen} /> <Stack.Screen name="Home" component={HomeScreen} /> </Stack.Navigator> </NavigationContainer> ); }; export default Navigation; ``` In this code, we create the navigation using `@react-navigation/native`. That's it! You now have a basic authentication system using Redux in your React Native app. **Example Use Cases:** * Sign in and sign out functionality * Authentication status management across multiple components and screens * Redux debugging using the Redux DevTools **Troubleshooting Tips:** * Make sure to install the correct versions of Redux and Redux-Thunk * Check the console for any errors or warnings * Use the Redux DevTools to debug your application **Additional Resources:** * [Redux Documentation](https://redux.js.org/) * [Redux-Thunk Documentation](https://github.com/reduxjs/redux-thunk) * [React-Native Documentation](https://reactnative.dev/) **Leave a comment or ask for help if you have any questions or need further assistance.** In the next topic, we will cover using AsyncStorage for local storage in React Native.