리덕스 reduxjs/toolkit 기초

리덕스 툴킷은 리덕스를 이용한 상태관리를 좀 더 간결하고 쉽게 할 수 있는 라이브러리.
리덕스 관련 예제를 두번 정도 해봤지만 아직도 어렵다.
눈에 보이게 순서로 정리되어있지 않으면 나는 이해가 조금 어렵다.

리덕스 툴킷 기초 순서!

1. npm i 리덕스 설치해주기

npm install @reduxjs/toolkit

리액트에서 사용시 아래도 같이 설치
npm install react-redux

2. store.js 만들기

• configureStore로 store만들기
  configureStore()는 스토어를 설정하는 함수이다.

import { configureStore } from "@reduxjs/toolkit";
export const store = configureStore({
    reducer: {
      //여기에 slice들을 등록할 수 있음!
    },
})

3. index.js 가서 Provider로 store 감싸주기

가장 바깥에 store를 두어야 한다.!

// 리덕스 저장소
import { Provider } from "react-redux";
import { store } from './store/store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 리덕스 저장소 */}
    <Provider store={store}>
      {/* 라우터 */}
      <Router>
        <Routes>
          <Route path="/*" element={ <App /> } />
        </Routes>
      </Router>
    </Provider>
  </React.StrictMode>
);

4. storeSlice만들기

Slice는 저장소의 기능 조각이라고 보면 된다.
예를 들어 store(저장소)가 하나의 케이크라고 생각하면
slice는 케이크를 구성하는 조각들이라고 보면 됨.
여러가지 조각 케이크들로 하나의 홀 케이크를 만드는 것으로 이미지화 할 수 있다.
그래서 slice에 그 조각을 어떻게 구성할 것인지에 대한 reducer 함수를 작성할 수 있다.
createSlice() 이용.

import { createSlice } from "@reduxjs/toolkit";
const initialState = {
    count: 0
} // 초기 값

export const counterSlice = createSlice({
    name: 'counter', //슬라이스의 이름
    initialState, //초기값
    reducers: { 
    // 기능 함수 -- 꼭 초기 상태 값을 받아와서 처리해줘야함
        increment: state => {
            state.count += 1;
        },
        decrement: state => {
            state.count -= 1;
        },
        reset: state => {
            state.count = 0;
        },
        // payload가 있는 값을 받아오는 함수
        incrementByAmount: (state, action) => {
            state.count += action.payload;
        },
    }
})
//이거는 reducer기능 쓸 때 dispatch로 불러와줄 애들
export const { increment, decrement, reset, incrementByAmount } = counterSlice.actions;

//이거는 store.js 에 reducer에서 사용할 것.
export default counterSlice.reducer;

그리고 export를 두가지 하는데
export const { action1, action2 } = slice.actions;
이거는 reducer기능 쓸 때 dispatch로 불러와줄 애들.

export defalut slice.reducer;
이거는 store.js 에 reducer에서 사용할 것.

5.store.js에 가서 Slice에서 내보낸 reducer를 가져온다

abcReducer 란 이름으로..
위에 카운터를 예시로 들었기 때문에...
만약 slice의 이름이 userSlice면 userReducer

import  counterReducer  from "../features/counter/counterSlice";
export const store = configureStore({
    reducer: {
      //여기에 slice들을 등록할 수 있음!'
        counter: counterReducer,
        users: usersReducer,
       //이런 식으로 slice들을 불러와준다. - 케이크를 모아주는 과정
    },
})

6. 컴포넌트에 가서 action들을 dispatch로 불러오기한다.

이때 useSelector, useDispatch 를 사용하는데
useSelector는 저장소에 initalState에 저장된 상태 값을 불러올 수 있게 도와준다.

const selectAllusers = useSelector((state) => state.불러올 속성이름);
이런 식으로 불러와줘야한다.

혹은 slice.js에서

export const selectAllusers = (state) => state.불러올 속성이름;

해두고 컴포넌트.js에서

const users = useSelector(selectAllusers);

이렇게 해줘도 된다..

const dispatch = useDispatch();
해준 후 기능을 구현하고 싶은 곳에서
dispatch(불러온 action의 이름()); 로 저장소의 상태값을 바꿔줄 수 있다.

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset, incrementByAmount } from './counterSlice';
const Counter = () => {
    const count = useSelector(state => state.counter.count)
    const dispatch = useDispatch();
    const [incrementAmount, setIncrementAmount] = useState(0);
    const addVal = Number(incrementAmount) || 0;

    const resetAll = () =>{
        setIncrementAmount(0);
        dispatch(reset());
    }
   
    return (
    <section>
        <p>{count}</p>
        <div>
            <button onClick={() => dispatch(decrement())}>-</button>
            <button onClick={() => dispatch(increment())}>+</button>
        </div>
        
        <input 
            type="text" 
            value={incrementAmount}
            onChange={(e) => setIncrementAmount(e.target.value)} />
        
        <button onClick={() => dispatch(incrementByAmount(addVal))}>Add</button>
        <button onClick={resetAll}>Reset</button>

    </section>
  )
}

export default Counter