[React Native] Redux toolkit & Todo App

React 목록

 

App.tsx

import React from 'react';
import {SafeAreaView, StatusBar} from 'react-native';
import {Provider} from 'react-redux';
import {store} from './src/redux/store';
import TodoHeader from './src/components/TodoHeader';
import TodoList from './src/components/TodoList';

const App = () => {
  const RootApp = () => {
    return (
      <SafeAreaView>
        <TodoHeader />
        <TodoList />
      </SafeAreaView>
    );
  };

  return (
    <Provider store={store}>
      <StatusBar barStyle="dark-content" />
      <RootApp />
    </Provider>
  );
};

export default App;

 

 

 

 

 

store.ts

import {configureStore} from '@reduxjs/toolkit';
import taskReducer from './taskSlice';

export const store = configureStore({
  reducer: {
    tasks: taskReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

 

 

 

 

taskSlice.ts

import {createSlice, nanoid} from '@reduxjs/toolkit';

export interface Task {
  id: string;
  name: string;
}

const initialState: Task[] = [];

export const taskSlice = createSlice({
  name: 'tasks',
  initialState,
  reducers: {
    addTask: (state, action) => {
      const newTask: Task = {
        id: nanoid(),
        name: action.payload.task,
      };
      state.push(newTask);
    },
    deleteTask: (state, action) => {
      return state.filter((item: any) => item.id !== action.payload.id);
    },
  },
});

export const {addTask, deleteTask} = taskSlice.actions;
export default taskSlice.reducer;

 

 

 

 

 

 

 

TodoHeader.tsx

import React, {useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Alert,
} from 'react-native';
import {useDispatch} from 'react-redux';
import {addTask} from '../redux/taskSlice';

function TodoHeader() {
  const dispatch = useDispatch();

  const onSubmitTask = () => {
    if (task.trim().length === 0) {
      Alert.alert('Enter a task');
      setTask('');
      return;
    }
    dispatch(addTask({task: task}));
    setTask('');
  };

  const [task, setTask] = useState('');

  return (
    <View>
      <Text style={styles.title}>Todo List</Text>
      <View style={styles.inputWrap}>
        <TextInput
          style={styles.textInput}
          placeholder="Add Todo"
          onChangeText={setTask}
          value={task}
        />
        <TouchableOpacity style={styles.addButton} onPress={onSubmitTask}>
          <Text style={styles.buttonText}>Add</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

export default TodoHeader;

const styles = StyleSheet.create({
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop: 20,
  },
  inputWrap: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  textInput: {
    borderColor: 'gray',
    borderWidth: 1,
    padding: 10,
    margin: 10,
    width: '90%',
    borderRadius: 5,
  },
  addButton: {
    backgroundColor: 'black',
    padding: 10,
    margin: 10,
    width: '90%',
    borderRadius: 5,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
  },
});

 

 

 

 

 

 

 

 

TodoList.tsx

import React from 'react';
import {View, Text, StyleSheet, FlatList, TouchableOpacity} from 'react-native';
import {useDispatch, useSelector} from 'react-redux';
import {RootState} from '../redux/store';
import {deleteTask} from '../redux/taskSlice';

function TodoList() {
  const dispatch = useDispatch();
  const todos = useSelector((state: RootState) => state.tasks);
  const itemDelete = (id: string) => {
    dispatch(deleteTask({id: id}));
  };

  const renderItem = ({item}) => {
    return (
      <View style={styles.item}>
        <Text style={styles.title}>{item.name}</Text>
        <TouchableOpacity
          style={styles.buttonDelet}
          onPress={() => itemDelete(item.id)}>
          <Text style={styles.delete}>Delete</Text>
        </TouchableOpacity>
      </View>
    );
  };

  return (
    <View>
      <FlatList
        data={todos}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

export default TodoList;

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#e9e9e9',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 25,
  },
  buttonDelet: {},
  delete: {
    fontSize: 20,
  },
});

 

 

 

 

 

 

 

 

React 목록