728x90
반응형
SMALL
안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
* 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;
728x90
반응형
LIST
'⋆ 。゜☁︎ 。⋆ 。゜☾゜。⋆⋆ 。゜☁︎ 。⋆ 。゜☾゜。⋆ > React' 카테고리의 다른 글
React - 리액트에서 쓰는 JSX 기본 문법 및 예시 (0) | 2023.08.06 |
---|---|
React - TodoList 추가, 삭제하기 (0) | 2023.07.27 |
React - Redux란? (저장소 store, 액션 action, 리듀서 reducers, 미들웨어 middleware) + Clock 실시간 시계만들기 (0) | 2023.07.27 |
React - Router (useNavigate, useLocation, useSearchParam) (0) | 2023.07.26 |
React - HOC(High-Order-Component) (0) | 2023.07.26 |