{"id":2580,"date":"2022-10-25T17:54:06","date_gmt":"2022-10-25T10:54:06","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=2580"},"modified":"2022-10-25T21:18:15","modified_gmt":"2022-10-25T14:18:15","slug":"todoapp-sample-crud-react-native-expo-using-redux-toolkit","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/","title":{"rendered":"TodoApp: Sample CRUD React Native  Expo using Redux Toolkit"},"content":{"rendered":"\r\n\r\nHello friends, back to the react native tutorial, this time we will discuss redux using redux-toolkit, redux toolkit is simpler than regular redux.\r\n\r\n\r\n\r\n\r\n\r\nRedux is a library for handling state management in React Native, there are various other state management such as Context, Mobx, and Recoil.\r\n\r\n\r\n\r\n\r\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\r\n<ul class=\"blocks-gallery-grid\">\r\n \t<li class=\"blocks-gallery-item\">\r\n<figure><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/10\/image-14.png\"><img loading=\"lazy\" decoding=\"async\" width=\"174\" height=\"300\" class=\"wp-image-2593\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/10\/image-14-174x300.png\" alt=\"Todo app react native redux toolkit\" data-id=\"2593\" data-full-url=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/10\/image-14.png\" data-link=\"https:\/\/www.bagi2info.com\/?attachment_id=2593\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/10\/image-14-174x300.png 174w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/10\/image-14.png 325w\" sizes=\"auto, (max-width: 174px) 100vw, 174px\" \/><\/a><\/figure>\r\n<\/li>\r\n \t<li class=\"blocks-gallery-item\">\r\n<figure><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/10\/image-15.png\"><img loading=\"lazy\" decoding=\"async\" width=\"172\" height=\"300\" class=\"wp-image-2596\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/10\/image-15-172x300.png\" alt=\"Todo app react native redux toolkit\" data-id=\"2596\" data-full-url=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/10\/image-15.png\" data-link=\"https:\/\/www.bagi2info.com\/?attachment_id=2596\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/10\/image-15-172x300.png 172w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/10\/image-15.png 313w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/a><\/figure>\r\n<\/li>\r\n<\/ul>\r\n<\/figure>\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#1_Appjs\" >1. App.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#2_Component_ButtonIcon\" >2. Component ButtonIcon<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#3_Component_Spacer\" >3. Component Spacer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#4_Module_TodoApp\" >4. Module TodoApp<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#5_Module_AddTodo\" >5. Module AddTodo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#6_Module_TodoList\" >6. Module TodoList<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#6_Redux_Store\" >6. Redux Store<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#7_Redux_todosSlice\" >7. Redux todosSlice<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Appjs\"><\/span>1. App.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n\r\nApp.js contains the main part of redux, which is the provider connected to the redux <strong>store<\/strong>.\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\" title=\"App.js\"><code class=\"language-javascript line-numbers\" lang=\"javascript\">import * as React from 'react';\r\nimport { Provider } from 'react-redux';\r\nimport { store } from '.\/src\/redux\/store';\r\nimport { TodoApp } from '.\/src\/module\/todos\/TodoApp';\r\n\r\nexport default function App() {\r\n  return (\r\n    &lt;Provider store={store}&gt;\r\n      &lt;TodoApp \/&gt;\r\n    &lt;\/Provider&gt;\r\n  );\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Component_ButtonIcon\"><\/span>2. Component ButtonIcon<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n\r\nComponent ButtonIcon to display button with Icon\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\" title=\"src\/component\/ButtonIcon.js\"><code class=\"language-javascript line-numbers\" lang=\"javascript\">import React from 'react';\r\nimport { Text, StyleSheet, TouchableOpacity } from 'react-native';\r\n\r\nimport { FontAwesome } from '@expo\/vector-icons';\r\n\r\nconst ButtonIcon = (props) =&gt; {\r\n  const {\r\n    iconName = 'exclamation-circle',\r\n    size = 24,\r\n    color = 'black',\r\n    onPress,\r\n    label,\r\n  } = props;\r\n\r\n  return (\r\n    &lt;TouchableOpacity style={styles.buttonStyle} onPress={onPress}&gt;\r\n      &lt;FontAwesome name={iconName} size={size} color={color} \/&gt;\r\n      &lt;Text style={styles.buttonLabelStyle}&gt;{label}&lt;\/Text&gt;\r\n    &lt;\/TouchableOpacity&gt;\r\n  );\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n  buttonStyle: {\r\n    margin: 10,\r\n    flexDirection: 'row',\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    padding: 5,\r\n  },\r\n  buttonLabelStyle: {\r\n    margin: 5,\r\n  },\r\n});\r\n\r\nexport default ButtonIcon;\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Component_Spacer\"><\/span>3. Component Spacer<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n\r\nComponent Spacer to display the space between 2 components\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\" title=\"src\/component\/Spacer.js\"><code class=\"language-javascript line-numbers\" lang=\"javascript\">import React from 'react';\r\nimport { View, StyleSheet } from 'react-native';\r\n\r\nconst Spacer = () =&gt; {\r\n  return &lt;View style={styles.container} \/&gt;;\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    marginVertical: 15,\r\n  },\r\n});\r\n\r\nexport default Spacer;\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Module_TodoApp\"><\/span>4. Module TodoApp<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n\r\nThe Todo App module is the main page module that houses the<strong> AddTodo<\/strong> and <strong>TodoList<\/strong> modules\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\" title=\"src\/module\/todos\/TodoApp.js\"><code class=\"language-javascript line-numbers\" lang=\"javascript\">import React, { useState } from 'react';\r\nimport { Text, View, StyleSheet } from 'react-native';\r\nimport Constants from 'expo-constants';\r\n\r\n\/\/ You can import from local files\r\nimport Spacer from '..\/..\/components\/Spacer';\r\n\r\n\/\/ or any pure javascript modules available in npm\r\nimport { Card } from 'react-native-paper';\r\n\r\nimport { TodoList } from '.\/TodoList';\r\nimport { AddTodo } from '.\/AddTodo';\r\n\r\nexport const TodoApp = () =&gt; {\r\n  \/\/ variable to save edit item\r\n  const [updateItem, setUpdateItem] = useState();\r\n\r\n  return (\r\n    &lt;View style={styles.container}&gt;\r\n      &lt;Card title=\"Card Title\"&gt;\r\n        &lt;Text style={styles.paragraph}&gt;\r\n          ToDo App with React Native and Redux Toolkit\r\n        &lt;\/Text&gt;\r\n      &lt;\/Card&gt;\r\n\r\n      &lt;Spacer \/&gt;\r\n\r\n      &lt;AddTodo updateItem={updateItem} setUpdateItem={setUpdateItem} \/&gt;\r\n\r\n      &lt;Spacer \/&gt;\r\n\r\n      &lt;TodoList updateItem={updateItem} setUpdateItem={setUpdateItem} \/&gt;\r\n    &lt;\/View&gt;\r\n  );\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    paddingTop: Constants.statusBarHeight,\r\n    backgroundColor: '#ecf0f1',\r\n    padding: 10,\r\n  },\r\n  paragraph: {\r\n    margin: 24,\r\n    fontSize: 18,\r\n    fontWeight: 'bold',\r\n    textAlign: 'center',\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Module_AddTodo\"><\/span>5. Module AddTodo<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n\r\nThe <strong>AddTodo<\/strong> module is a form to display the add and edit task forms.\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\" title=\"src\/module\/todos\/AddTodo.js\"><code class=\"language-javascript line-numbers\" lang=\"javascript\">import React, { useState } from 'react';\r\nimport { View, Alert } from 'react-native';\r\nimport { useDispatch } from 'react-redux';\r\nimport { addTodo, updateTodo } from '.\/..\/..\/redux\/todosSlice';\r\n\r\nimport { Title, Card, TextInput, Button } from 'react-native-paper';\r\n\r\n\/\/ You can import from local files\r\nimport Spacer from '..\/..\/components\/Spacer';\r\n\r\nexport const AddTodo = ({ updateItem, setUpdateItem }) =&gt; {\r\n  const [text, setText] = useState();\r\n\r\n  const dispatch = useDispatch();\r\n\r\n  function handleSumbit() {\r\n    if (!updateItem) {\r\n      if (!text) {\r\n        Alert.alert('Info', 'Please entry the text field');\r\n        return;\r\n      }\r\n      dispatch(addTodo(text));\r\n      setText('');\r\n      setUpdateItem();\r\n    } else {\r\n      dispatch(updateTodo(updateItem));\r\n      setText('');\r\n      setUpdateItem();\r\n    }\r\n  }\r\n\r\n  return (\r\n    &lt;View&gt;\r\n      &lt;Card&gt;\r\n        &lt;Card.Content&gt;\r\n          {!updateItem ? (\r\n            &lt;Title&gt;Add ToDo Here&lt;\/Title&gt;\r\n          ) : (\r\n            &lt;Title&gt;Edit ToDo Here&lt;\/Title&gt;\r\n          )}\r\n\r\n          &lt;TextInput\r\n            mode=\"outlined\"\r\n            label=\"Task\"\r\n            value={!updateItem ? text : updateItem?.text}\r\n            onChangeText={(textdata) =&gt; {\r\n              !updateItem\r\n                ? setText(textdata)\r\n                : setUpdateItem({ ...updateItem, text: textdata });\r\n            }}\r\n          \/&gt;\r\n\r\n          &lt;Spacer \/&gt;\r\n\r\n          &lt;Button mode=\"contained\" onPress={handleSumbit}&gt;\r\n            {!updateItem ? `Add Task` : `Edit Task`}\r\n          &lt;\/Button&gt;\r\n        &lt;\/Card.Content&gt;\r\n      &lt;\/Card&gt;\r\n    &lt;\/View&gt;\r\n  );\r\n};\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_Module_TodoList\"><\/span>6. Module TodoList<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n\r\nTodoList displays all task data including the Delete button and completed tasks\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\" title=\"src\/module\/todos\/TodoList.js\"><code class=\"language-javascript line-numbers\" lang=\"javascript\">import React from 'react';\r\n\r\nimport {\r\n  View,\r\n  FlatList,\r\n  TouchableOpacity,\r\n} from 'react-native';\r\n\r\n\/\/ You can import from local files\r\nimport Spacer from '..\/..\/components\/Spacer';\r\nimport ButtonIcon from '..\/..\/components\/ButtonIcon';\r\n\r\n\/\/ or any pure javascript modules available in npm\r\nimport { Paragraph, Card } from 'react-native-paper';\r\nimport { FontAwesome as Icon } from '@expo\/vector-icons';\r\n\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { deleteTodo, toggleTodo } from '.\/..\/..\/redux\/todosSlice';\r\n\r\nexport function TodoList({ setUpdateItem }) {\r\n  const todos = useSelector((state) =&gt; state.todos);\r\n  const dispatch = useDispatch();\r\n\r\n  function handleDelete(id) {\r\n    dispatch(deleteTodo(id));\r\n  }\r\n\r\n  function handleUpdateStart(item) {\r\n    setUpdateItem(item);\r\n  }\r\n\r\n  function handleToogle(item) {\r\n    dispatch(toggleTodo(item));\r\n  }\r\n  return (\r\n    &lt;View&gt;\r\n\r\n      &lt;FlatList\r\n        data={todos}\r\n        keyExtractor={(item) =&gt; item.id}\r\n        renderItem={({ item, index }) =&gt; {\r\n          return (\r\n            &lt;&gt;\r\n              &lt;Card&gt;\r\n                &lt;Card.Title\r\n                  title={`Task#${item.id}`}\r\n                  left={(props) =&gt; (\r\n                    &lt;Icon name=\"tasks\" size={24} color=\"black\" \/&gt;\r\n                  )}\r\n                  right={(props) =&gt; (\r\n                    &lt;ButtonIcon\r\n                      iconName=\"close\"\r\n                      color=\"red\"\r\n                      onPress={() =&gt; handleDelete(item.id)}\r\n                    \/&gt;\r\n                  )}\r\n                \/&gt;\r\n                &lt;Card.Content\r\n                  style={{\r\n                    flexDirection: 'row',\r\n                    justifyContent: 'space-between',\r\n                  }}&gt;\r\n                  &lt;Paragraph&gt;\r\n                    &lt;TouchableOpacity onPress={() =&gt; handleUpdateStart(item)}&gt;\r\n                      {item.text}\r\n                    &lt;\/TouchableOpacity&gt;\r\n                  &lt;\/Paragraph&gt;\r\n                  &lt;TouchableOpacity onPress={() =&gt; handleToogle(item)}&gt;\r\n                    &lt;Icon\r\n                      name=\"check\"\r\n                      size={22}\r\n                      color={item.completed ? 'green' : 'gray'}\r\n                    \/&gt;\r\n                  &lt;\/TouchableOpacity&gt;\r\n                &lt;\/Card.Content&gt;\r\n              &lt;\/Card&gt;\r\n              &lt;Spacer \/&gt;\r\n            &lt;\/&gt;\r\n          );\r\n        }}\r\n      \/&gt;\r\n    &lt;\/View&gt;\r\n  );\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_Redux_Store\"><\/span>6. Redux Store<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\" title=\"src\/redux\/store.js\"><code class=\"language-javascript line-numbers\" lang=\"javascript\">import { configureStore } from '@reduxjs\/toolkit';\r\n\r\nimport todoSlice from '.\/todosSlice';\r\n\r\nexport const store = configureStore({\r\n  reducer: {\r\n    todos: todoSlice,\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"7_Redux_todosSlice\"><\/span>7. Redux todosSlice<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\" title=\"src\/redux\/todosSlice.js\"><code class=\"language-javascript line-numbers\" lang=\"javascript\">import { createSlice } from '@reduxjs\/toolkit';\r\n\r\nlet nextTodoId = 1;\r\n\r\nconst todosSlice = createSlice({\r\n  name: 'todos',\r\n  initialState: [],\r\n  reducers: {\r\n    addTodo(state, action) {\r\n      state.push({ id: nextTodoId++, text: action.payload, completed: false });\r\n    },\r\n    updateTodo(state, action) {\r\n      const todo = state.find((todo) =&gt; todo.id === action.payload.id);\r\n\r\n      if (todo) {\r\n        todo.text = action.payload.text;\r\n      }\r\n    },\r\n    deleteTodo(state, action) {\r\n      return state.filter((todo) =&gt; todo.id !== action.payload);\r\n    },\r\n    toggleTodo(state, action) {\r\n      const todo = state.find((todo) =&gt; todo.id === action.payload.id);\r\n      if (todo) {\r\n        todo.completed = !todo.completed;\r\n      }\r\n    },\r\n  },\r\n});\r\n\r\nexport const { addTodo, updateTodo, deleteTodo, toggleTodo } =\r\n  todosSlice.actions;\r\n\r\nexport default todosSlice.reducer;\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nSource code:\r\n\r\n\r\n\r\n\r\n\r\n<a href=\"https:\/\/snack.expo.dev\/@rudiahmad\/todoapp---sample-crud-with-redux-toolkit\">https:\/\/snack.expo.dev\/@rudiahmad\/todoapp&#8212;sample-crud-with-redux-toolkit<\/a>\r\n\r\n\r\n\r\n\r\n\r\n<a href=\"https:\/\/github.com\/rudiahmad\/todoapp---sample-crud-with-redux-toolkit\">https:\/\/github.com\/rudiahmad\/todoapp&#8212;sample-crud-with-redux-toolkit<\/a>\r\n\r\n\r\n\r\n\r\n\r\nNote:\r\n\r\n\r\n\r\n\r\n\r\nAdditional update, delete and toggle functions completed from the original\r\n\r\n\r\n\r\n\r\n\r\nReference\r\n\r\n\r\n\r\n\r\n\r\n<a href=\"https:\/\/snack.expo.dev\/@roycechua\/redux-react-native-sample-redux-toolkit-complete\">https:\/\/snack.expo.dev\/@roycechua\/redux-react-native-sample-redux-toolkit-complete<\/a>\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Hello friends, back to the react native tutorial, this time we will discuss redux using redux-toolkit, redux toolkit is simpler than regular redux. Redux is a library for handling state management in React Native,&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":2601,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,173],"tags":[150,145],"class_list":["post-2580","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-komputer","category-react-native","tag-react-native","tag-source-code"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/2580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=2580"}],"version-history":[{"count":9,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/2580\/revisions"}],"predecessor-version":[{"id":2618,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/2580\/revisions\/2618"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/2601"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=2580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=2580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=2580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}