chore: apply redux-thunk & add redux dev-tools

package.json

@@ -8,7 +8,8 @@
     "start": "react-native start",
     "test": "jest",
     "lint": "eslint .",
-    "pod": "cd ios && pod install && cd .."
+    "pod": "cd ios && pod install && cd ..",
+    "postinstall": "rndebugger-open"
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.7",
@@ -17,12 +18,15 @@
     "@reduxjs/toolkit": "^1.3.2",
     "react": "16.11.0",
     "react-native": "0.62.0",
+    "react-native-debugger-open": "^0.3.24",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-reanimated": "^1.7.1",
     "react-native-safe-area-context": "^0.7.3",
     "react-native-screens": "^2.4.0",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-thunk": "^2.3.0",
     "styled-components": "^5.0.1"
   },
   "devDependencies": {

src/Store.ts

@@ -1,6 +1,8 @@
-import {createStore} from 'redux';
+import {Alert} from 'react-native';
+import {createStore, compose, applyMiddleware} from 'redux';
 import {createAction, createReducer} from '@reduxjs/toolkit';
-
+import {composeWithDevTools} from 'redux-devtools-extension';
+import thunk from 'redux-thunk';
 // export const ADD_TODO = 'ADD_TODO';
 // export const DELETE_TODO = 'DELETE_TODO';
 
@@ -41,6 +43,7 @@ const deleteToDo = createAction('DELETE');
 const reducer = createReducer([], {
   // state mutate도 쉬워져.
   [addToDo]: (state, action) => {
+    console.log('😍', action);
     const newToDo = {text: action.payload, id: Date.now()};
     state.push(newToDo); // createReducer는 이렇게 mutate해도 괜찮다!!!
     // *** mutate, not return!!!!!!!! // 뭔가를 return할 땐 꼭 새로은 state여야 해. push하면 그냥 Mutate 될 뿐이지!
@@ -49,7 +52,34 @@ const reducer = createReducer([], {
     state.filter(toDo => toDo.id !== action.payload), // *** or return new state
 });
 
-export const store = createStore(reducer);
+export const addToDoAsync = text => {
+  return async (dispatch, getState) => {
+    try {
+      console.log('thunk addToDoAsync');
+      dispatch(actionCreators.addToDo(text));
+    } catch (e) {
+      Alert.alert('addToDoAsync error', JSON.stringify(e));
+    }
+  };
+};
+
+export const deleteToDoAsync = id => {
+  return async (dispatch, getState) => {
+    try {
+      console.log('thunk deleteToDoAsync');
+      dispatch(actionCreators.deleteToDo(id));
+    } catch (e) {
+      Alert.alert('addToDoAsync error', JSON.stringify(e));
+    }
+  };
+};
+
+export const store = createStore(
+  reducer,
+  // https://medium.com/encored-technologies-engineering-data-science/react-native-%EB%94%94%EB%B2%84%EA%B9%85-%ED%99%98%EA%B2%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0-7e46bfe89f6
+  // 따라서 devtool 설치
+  composeWithDevTools(applyMiddleware(thunk)),
+);
 export const actionCreators = {
   addToDo,
   deleteToDo,

src/components/ToDo.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import {actionCreators} from '../store';
+import {actionCreators, deleteToDoAsync} from '../store';
 import {connect} from 'react-redux';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {StackParamList} from '../../App';
@@ -43,7 +43,7 @@ const ToDo = ({goToSecond, id, text, deleteToDo}: Props) => {
 const mapDispatchToProps = (dispatch, ownProps) => {
   // ownProps 아주 유용.
   return {
-    deleteToDo: () => dispatch(actionCreators.deleteToDo(ownProps.id)),
+    deleteToDo: () => dispatch(deleteToDoAsync(ownProps.id)),
   };
 };
 

src/screens/First.tsx

@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 
 import {StackParamList} from '../../App';
 import {ToDoIF} from '../interface';
-import {actionCreators} from '../store';
+import {actionCreators, addToDoAsync} from '../store';
 import ToDo from '../components/ToDo';
 
 const Container = styled.View`
@@ -83,7 +83,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
   // ownProps 아주 유용.
   return {
-    addToDo: (text: string) => dispatch(actionCreators.addToDo(text)),
+    addToDo: (text: string) => dispatch(addToDoAsync(text)),
   };
 };