{"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_85 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":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"Contoh aplikasi TodoApp: Sample CRUD React Native Expo menggunakan Redux Toolkit, terdapat fungsi tambah, update, delete, dan toogle task selesai\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"webmaster\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Bagi2info.com - Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"TodoApp: Sample CRUD React Native Expo using Redux Toolkit\" \/>\n\t\t<meta property=\"og:description\" content=\"Contoh aplikasi TodoApp: Sample CRUD React Native Expo menggunakan Redux Toolkit, terdapat fungsi tambah, update, delete, dan toogle task selesai\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2022-10-25T10:54:06+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2022-10-25T14:18:15+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@bagi2infocom\" \/>\n\t\t<meta name=\"twitter:title\" content=\"TodoApp: Sample CRUD React Native Expo using Redux Toolkit\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Contoh aplikasi TodoApp: Sample CRUD React Native Expo menggunakan Redux Toolkit, terdapat fungsi tambah, update, delete, dan toogle task selesai\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@bagi2infocom\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&amp;ssl=1\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/#blogposting\",\"name\":\"TodoApp: Sample CRUD React Native Expo using Redux Toolkit\",\"headline\":\"TodoApp: Sample CRUD React Native  Expo using Redux Toolkit\",\"author\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/todoapp3.jpg\",\"width\":475,\"height\":224,\"caption\":\"todoapp crud react native redux toolkit\"},\"datePublished\":\"2022-10-25T17:54:06+07:00\",\"dateModified\":\"2022-10-25T21:18:15+07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/#webpage\"},\"articleSection\":\"Komputer, React Native, react native, source code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/#listItem\",\"name\":\"Komputer\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/#listItem\",\"position\":2,\"name\":\"Komputer\",\"item\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/#listItem\",\"name\":\"TodoApp: Sample CRUD React Native  Expo using Redux Toolkit\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/#listItem\",\"position\":3,\"name\":\"TodoApp: Sample CRUD React Native  Expo using Redux Toolkit\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/#listItem\",\"name\":\"Komputer\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/bagi2infocom\",\"https:\\\/\\\/www.instagram.com\\\/bagi2infocom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/bagi2infocom\",\"https:\\\/\\\/www.instagram.com\\\/bagi2infocom\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/#webpage\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/\",\"name\":\"TodoApp: Sample CRUD React Native Expo using Redux Toolkit\",\"description\":\"Contoh aplikasi TodoApp: Sample CRUD React Native Expo menggunakan Redux Toolkit, terdapat fungsi tambah, update, delete, dan toogle task selesai\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/todoapp3.jpg\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/#mainImage\",\"width\":475,\"height\":224,\"caption\":\"todoapp crud react native redux toolkit\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\\\/#mainImage\"},\"datePublished\":\"2022-10-25T17:54:06+07:00\",\"dateModified\":\"2022-10-25T21:18:15+07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/\",\"name\":\"Bagi2info.com\",\"description\":\"Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"TodoApp: Sample CRUD React Native Expo using Redux Toolkit","description":"Contoh aplikasi TodoApp: Sample CRUD React Native Expo menggunakan Redux Toolkit, terdapat fungsi tambah, update, delete, dan toogle task selesai","canonical_url":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#blogposting","name":"TodoApp: Sample CRUD React Native Expo using Redux Toolkit","headline":"TodoApp: Sample CRUD React Native  Expo using Redux Toolkit","author":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"publisher":{"@id":"https:\/\/www.bagi2info.com\/en\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/10\/todoapp3.jpg","width":475,"height":224,"caption":"todoapp crud react native redux toolkit"},"datePublished":"2022-10-25T17:54:06+07:00","dateModified":"2022-10-25T21:18:15+07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#webpage"},"isPartOf":{"@id":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#webpage"},"articleSection":"Komputer, React Native, react native, source code"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/#listItem","position":1,"name":"Home","item":"https:\/\/www.bagi2info.com\/en\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/#listItem","name":"Komputer"}},{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/#listItem","position":2,"name":"Komputer","item":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#listItem","name":"TodoApp: Sample CRUD React Native  Expo using Redux Toolkit"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#listItem","position":3,"name":"TodoApp: Sample CRUD React Native  Expo using Redux Toolkit","previousItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/#listItem","name":"Komputer"}}]},{"@type":"Person","@id":"https:\/\/www.bagi2info.com\/en\/#person","name":"webmaster","image":{"@type":"ImageObject","@id":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"webmaster"},"sameAs":["https:\/\/twitter.com\/bagi2infocom","https:\/\/www.instagram.com\/bagi2infocom"]},{"@type":"Person","@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author","url":"https:\/\/www.bagi2info.com\/en\/author\/admin\/","name":"webmaster","image":{"@type":"ImageObject","@id":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"webmaster"},"sameAs":["https:\/\/twitter.com\/bagi2infocom","https:\/\/www.instagram.com\/bagi2infocom"]},{"@type":"WebPage","@id":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#webpage","url":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/","name":"TodoApp: Sample CRUD React Native Expo using Redux Toolkit","description":"Contoh aplikasi TodoApp: Sample CRUD React Native Expo menggunakan Redux Toolkit, terdapat fungsi tambah, update, delete, dan toogle task selesai","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.bagi2info.com\/en\/#website"},"breadcrumb":{"@id":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#breadcrumblist"},"author":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"creator":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/10\/todoapp3.jpg","@id":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#mainImage","width":475,"height":224,"caption":"todoapp crud react native redux toolkit"},"primaryImageOfPage":{"@id":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/#mainImage"},"datePublished":"2022-10-25T17:54:06+07:00","dateModified":"2022-10-25T21:18:15+07:00"},{"@type":"WebSite","@id":"https:\/\/www.bagi2info.com\/en\/#website","url":"https:\/\/www.bagi2info.com\/en\/","name":"Bagi2info.com","description":"Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.bagi2info.com\/en\/#person"}}]},"og:locale":"en_US","og:site_name":"Bagi2info.com - Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo","og:type":"article","og:title":"TodoApp: Sample CRUD React Native Expo using Redux Toolkit","og:description":"Contoh aplikasi TodoApp: Sample CRUD React Native Expo menggunakan Redux Toolkit, terdapat fungsi tambah, update, delete, dan toogle task selesai","og:url":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/","og:image":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1","og:image:secure_url":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1","article:published_time":"2022-10-25T10:54:06+00:00","article:modified_time":"2022-10-25T14:18:15+00:00","twitter:card":"summary","twitter:site":"@bagi2infocom","twitter:title":"TodoApp: Sample CRUD React Native Expo using Redux Toolkit","twitter:description":"Contoh aplikasi TodoApp: Sample CRUD React Native Expo menggunakan Redux Toolkit, terdapat fungsi tambah, update, delete, dan toogle task selesai","twitter:creator":"@bagi2infocom","twitter:image":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&ssl=1"},"aioseo_meta_data":{"post_id":"2580","title":null,"description":"Contoh aplikasi TodoApp: Sample CRUD React Native Expo menggunakan Redux Toolkit, terdapat fungsi tambah, update, delete, dan toogle task selesai","keywords":[],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2022-10-25 10:20:12","updated":"2025-06-04 07:48:55","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.bagi2info.com\/en\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.bagi2info.com\/en\/category\/komputer\/\" title=\"Komputer\">Komputer<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tTodoApp: Sample CRUD React Native  Expo using Redux Toolkit\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.bagi2info.com\/en\/"},{"label":"Komputer","link":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/"},{"label":"TodoApp: Sample CRUD React Native  Expo using Redux Toolkit","link":"https:\/\/www.bagi2info.com\/en\/todoapp-sample-crud-react-native-expo-using-redux-toolkit\/"}],"_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}]}}