diff --git a/README.md b/README.md index 0362f8e..5ea7b7a 100644 --- a/README.md +++ b/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) \ No newline at end of file + - Deal with configureStore (req : redux toolkit) + +* Deal with createSlice \ No newline at end of file diff --git a/src/components/ToDo.js b/src/components/ToDo.js index f2e0c98..2069008 100644 --- a/src/components/ToDo.js +++ b/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)) }; } diff --git a/src/routes/Home.js b/src/routes/Home.js index ba1106c..a751395 100644 --- a/src/routes/Home.js +++ b/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)) }; } diff --git a/src/store.js b/src/store.js index 64bd6b8..8b624ed 100644 --- a/src/store.js +++ b/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,6 +37,7 @@ const reducer = (state = [], action) => { }; */ +/* const reducer = createReducer([], { [addToDo]: (state, action) =>{ state.push({text:action.payload,id:Date.now()}); @@ -43,12 +45,22 @@ const reducer = createReducer([], { [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;