React - createSlice란? (+ 카운터 만들기)

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

 

* createSlice란?

    createSlice?
    리듀서 + 액션 생성
    리덕스에서 제공하는 함수로 리듀서와 action을 함께 생성해줄수 있다.

    createSlice? 반복적인 액션 생성작업을 줄여서 생산성을 향상시키기위해
    만들어진 함수

    [표현법]
    const 변수명 = createSlice({
        name : '리듀서의 이름',
        initialState : 초기화할 값
        reducers : {
            액션1 : () => {
                //상태변경로직
            },
            액션2 : () => {
                // 상태변경로직
            }
        }
    });

 

<카운터 만들기>

* dispatcher 역할 js

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({   //; 매개변수가 필요없어서 생략한 상태임.
    name : 'counter',
    initialState : { //;객체형태로 전달
        value : 0
    },
    reducers : {                             //; 매개변수 넘겨주지 않아도 알아서 state값이 저장됨.
        increment : (state) => {    //; createSlice 함수가 실행될때 reducers의 increment,decrement 값이 담길것임.
            state.value += 1;       //; 이 값들이 아래의 actions에 담김.
        },
        decrement : (state) => {
            state.value -= 1;
        }
    }
});

export const {increment, decrement} = counterSlice.actions; //;구조분해할당

export default counterSlice.reducer;

 

* store 역할의 js

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from '../redux/counterSlice';
import todosReducer from '../redux/todoSlice';


export default configureStore({
    reducer : {
        counter : counterReducer,     //;01_Redux.js의 const store = configureStore({ reducer : rootReducer , middleware:[] }); 와 같은 방식으로 이름 변경해준것임.
        todoList : todosReducer
    },
    middleware : []
});

 

* view역할의 js

import { useDispatch, useSelector } from 'react-redux';
import {Button} from 'reactstrap';
import { increment, decrement } from '../redux/counterSlice';  //;action이라고 봐도됨.

export default function Counter(){
    const count = useSelector( (state) => state.counter.value );

    const dispatch = useDispatch();

    return(
        <div>
            <div style={{display:"flex",justifyContent:"center"}}>
                <Button color="warning" onClick={() => { dispatch(decrement())}}>-</Button>
                <div style={{width:"100%"}}>{count}</div>
                <Button color="primary" onClick={() => { dispatch(increment())}}>-</Button>
            </div>
        </div>
    )

}

 

* 실행시킬 js

import logo from './logo.svg';
import './App.css';
import Counter from './components/Counter';

function App() {
  return (
      <Counter/>
  );
}

export default App;