[TIL] 리덕스

Redux를 사용하면 컴포넌트들이 props 없이 state 공유가능

• 1. redux store.js 파일에 모든 state 보관 가능
• 2. 컴포넌트들이 각각 state 가져오기
• 3. 컴포넌트들이 state 변경하기

리덕스 설치

• 설치 전 package.json에서 리엑트와 리엑트돔 버전을 확인하기

npm install @reduxjs/toolkit@1.8.1 react-redux

리덕스 세팅

1. store.js 파일 생성해서 아래 코드로 세팅한다.

import { configureStore, createSlice } from '@reduxjs/toolkit';

//useState 같은 역할의 createSlice
let user = createSlice({ name: 'user', initialState: 'uerName' });

export default configureStore({
  reducer: {
    user: user.reducer,
  },
});

2. index.js 에서 아래 추가하기

import { Provider } from 'react-redux';
import store from './store.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
	  //감싸주기
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
    //감싸주기
  </React.StrictMode>
);

3. state를 받아서 사용하려는 컴포넌트에서 useDispatch 사용하기

  let user = useSelector((state) => {
    return state.user;
  });
  let stock = useSelector((state) => state.stock);
  console.log(user);
  console.log(stock);
//리턴 아래에서는 아래와 같이 불러옴
{user}

리덕스로 state 변경요청하기

1. state 수정 요청하는 reducer 만들기
2. reducer 내부에 함수 만들어서 내보내기

// store.js

let user = createSlice({
  name: 'user',
  initialState: 'userName',
  //아래 reducer 만들기
  reducers: {
    changeName: (state, action) => {
      return 'john ' + state;
    },
  },
});

//user.actions.changeName 함수를 내보내기
export let { changeName } = user.actions;

3. 원하는 곳에서 수정 요청 함수를 실행해달라고 요청하기 dispatch

import { useSelector, useDispatch } from 'react-redux';
import { changeName } from '../store';

let dispatch = useDispatch();

// return문 아래
<button onClick={() => {dispatch(changeName());}}>
변경
</button>

2. redux store에서 함수 실행해서 state 변경됨

리덕스에서 state가 array, object일 경우

1. store.js에서 아래와 같이 reducers를 설정할 수 있음

// store.js
let cart = createSlice({
  name: 'cart',
  //state가 object인 경우
  initialState: [
    { id: 1, name: '안녕1', count: 3 },
    { id: 2, name: '안녕2', count: 2 },
    { id: 3, name: '안녕3', count: 1 },
  ],
  reducers: {
    addCart: (state, action) => {
    //payload에서 id와 amount 값을 각각 가져옴
      const { id, amount } = action.payload;
      return state.map((item) => {
        if (item.id === id) {
          return { ...item, count: item.count + amount };
        }
        return item;
      });
    },
  },
});

export let { addCart } = cart.actions;

2. state 변경 필요한 js/컴포넌트에서 아래와 같이 설정 가능

//cart.map의 return 내부
                  <button
                    onClick={() => {
                    //위 store에 설정한 것 처럼 id와 amount 값을 각각 payload로 보냄
                      dispatch(addCart({ id: cart.id, amount: -1 }));
                    }}
                  >
                    -
                  </button>
                  //state 표기
                  {cart.count}
                  //위 store에 설정한 것 처럼 id와 amount 값을 각각 payload로 보냄
                  <button
                    onClick={() => {
                      dispatch(addCart({ id: cart.id, amount: 1 }));
                    }}
                  >
                    +
                  </button>