**Course Title:** Building Mobile Applications with React Native **Section Title:** State Management with Redux **Topic:** Creating actions, reducers, and the store. In this topic, we will cover the core concepts of Redux, including actions, reducers, and the store. By the end of this topic, you will be able to create and connect these components to manage state in your React Native applications. ### Actions In Redux, an action is an object that represents a change in the application's state. It typically has a `type` property that describes the action being performed. ```javascript // exampleAction.js export const loadTodos = () => { return { type: 'LOAD_TODOS' }; }; ``` Actions can also have additional properties that contain data related to the action. ```javascript // exampleAction.js export const addTodo = (text) => { return { type: 'ADD_TODO', text }; }; ``` In a larger application, you might have many actions. It's common to store them in a separate file or directory. ### Reducers A reducer is a function that takes the current state and an action, and returns a new state. It's responsible for updating the state based on the action. ```javascript // todosReducer.js const initialState = []; const todosReducer = (state = initialState, action) => { switch (action.type) { case 'LOAD_TODOS': // Load todos from server or database // For simplicity, we'll just return the initial state return state; case 'ADD_TODO': return [...state, { text: action.text, completed: false }]; default: return state; } }; export default todosReducer; ``` In the above example, the `todosReducer` function takes the current state and an action as arguments. It uses a switch statement to determine which action to perform based on the `type` property of the action. ### The Store The store is the central location that holds the application's state. It's created by passing the reducer(s) to the `createStore` function from the `redux` library. ```javascript // store.js import { createStore } from 'redux'; import todosReducer from './todosReducer'; const store = createStore(todosReducer); export default store; ``` You can also combine multiple reducers into a single store using the `combineReducers` function. ```javascript // store.js import { createStore, combineReducers } from 'redux'; import todosReducer from './todosReducer'; import settingsReducer from './settingsReducer'; const rootReducer = combineReducers({ todos: todosReducer, settings: settingsReducer, }); const store = createStore(rootReducer); export default store; ``` In this case, the state will be an object with `todos` and `settings` properties. ### Example Use Case Here's an example of how you can use the actions, reducer, and store in a React Native component: ```javascript // TodoList.js import React, { useState, useEffect } from 'react'; import { View, Text, FlatList } from 'react-native'; import { useSelector, useDispatch } from 'react-redux'; import { loadTodos, addTodo } from './actions'; const TodoList = () => { const dispatch = useDispatch(); const todos = useSelector((state) => state.todos); useEffect(() => { dispatch(loadTodos()); }, [dispatch]); const handleAddTodo = (text) => { dispatch(addTodo(text)); }; return ( <View> <FlatList data={todos} renderItem={({ item }) => ( <Text>{item.text}</Text> )} keyExtractor={(item) => item.text} /> <Text onPress={() => handleAddTodo('New Todo')}>Add Todo</Text> </View> ); }; export default TodoList; ``` In this example, we use the `useDispatch` hook to get the dispatch function, and the `useSelector` hook to get the todos state from the store. We then use the dispatch function to load the todos when the component mounts, and to add a new todo when the user presses the "Add Todo" button. ### Conclusion In this topic, we covered the core concepts of Redux, including actions, reducers, and the store. We learned how to create actions, reducers, and the store, and how to use them in a React Native component. **Key Takeaways:** * Actions are objects that represent changes in the application's state. * Reducers are functions that update the state based on the action. * The store is the central location that holds the application's state. **Additional Resources:** * [Redux Documentation](https://redux.js.org/) * [Redux GitHub Repository](https://github.com/reduxjs/redux) **What's Next:** In the next topic, we will cover connecting components to the Redux store. **Leave a Comment or Ask for Help:** If you have any questions or need further clarification on any of the concepts covered in this topic, please leave a comment or ask for help.