Deal with createSlice

README.md

@@ -6,4 +6,6 @@ Learning Vanilla-Redux and React-Redux
  - Detail Screen
  - Deal with Creact Action
  - Deal with CreateReducer
- - Deal with configureStore (req : redux toolkit)
+ - Deal with configureStore (req : redux toolkit)
+
+* Deal with createSlice

src/components/ToDo.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { actionCreators } from "../store";
+import { remove } from "../store";
 import { Link } from "react-router-dom";
 
 function ToDo({ text, onBtnClick, id }) {
@@ -14,7 +14,7 @@ function ToDo({ text, onBtnClick, id }) {
 
 function mapDispatchToProps(dispatch, ownProps) {
   return {
-    onBtnClick: () => dispatch(actionCreators.deleteToDo(ownProps.id))
+    onBtnClick: () => dispatch(remove(ownProps.id))
   };
 }
 

src/routes/Home.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
-import { actionCreators } from "../store";
+import { add } from "../store";
 import ToDo from "../components/ToDo";
 
 function Home({ toDos, addToDo }) {
@@ -35,7 +35,7 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    addToDo: text => dispatch(actionCreators.addToDo(text))
+    addToDo: text => dispatch(add(text))
   };
 }
 

src/store.js

@@ -1,5 +1,5 @@
 import { createStore } from "redux";
-import { createAction, createReducer, configureStore } from "@reduxjs/toolkit";
+import {configureStore, createSlice } from "@reduxjs/toolkit";
 
 
 /*
@@ -20,10 +20,11 @@ const deleteToDo = id => {
   };
 };
 */
+
+/*
 const addToDo = createAction("ADD");
 const deleteToDo = createAction("DELETE");
 
-/*
 const reducer = (state = [], action) => {
   switch (action.type) {
     case addToDo.type:
@@ -36,19 +37,30 @@ const reducer = (state = [], action) => {
 };
 */
 
+/*
 const reducer = createReducer([], {
     [addToDo]: (state, action) =>{
         state.push({text:action.payload,id:Date.now()});
     },
     [deleteToDo]: (state, action) => 
         state.filter(toDo => toDo.id !== action.payload)
 })
+*/
+
+const toDos = createSlice({
+    name:'toDosReducer',
+    initialState:[],
+    reducers:{
+        add: (state, action) =>{
+            state.push({text:action.payload, id:Date.now()})
+        },
+        remove: (state, action) => 
+            state.filter(toDo => toDo.id !== action.payload)
+    }
+})
 
-const store = configureStore({ reducer });
+const store = configureStore({ reducer: toDos.reducer });
 
-export const actionCreators = {
-  addToDo,
-  deleteToDo
-};
+export const {add,remove} = toDos.actions;
 
 export default store;