장바구니를 만들거야

Redux 세팅

Redux 설치

npm install @reduxjs/toolkit react-redux

store.js 파일 만들기

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

위 코드를 기본적으로 입력해주면 setting완료

index.js에서 사용

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';

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

reportWebVitals();

위와 같이 사용하여 Provider로 감싸준다.

Redux 사용하기

store.js 에서

createSlice({
  name: 'state이름',
  initialState: '값',
})

위와 같이 slice를 만들어준다.

state하나가 slice 하나라고 보면 된다.

최종 등록코드

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

let user = createSlice({
  name: 'user',
  initialState: 'kim',
})

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

Cart.js 에서 사용하는 방법은…

import { useSelector } from "react-redux";

function Cart() {
  let a = useSelector((state) => { return state });
  console.log(a.user);
  ...
}

이렇게 쓰면 위에서 등록한 state를 가져올 수 있다.

useSelctor 가져올 때 아래와 같이 특정 state만 가져올 수 있다.

let user = useSelector((state) => { return state.user });

Redux 만쓰면 될까?

간단한 프로젝트냐 아니냐에따라 다르다..

대형 프로젝트에서만 사용하자.

Redux에서 state 변경하는 방법

함수를 만들어 수정해달라고 요청해줘야 함.

1. state 수정해주는 함수 만들기

let user = createSlice({
  name: 'user',
  initialState: 'kim',

  reducer: {
    changeName(state) { //state는 변경전 값
      return 'john ' + state
    }
  }
})

2. export 해줘야 함.

export let { changeName } = user.actions;

user.actions 안에는 state 변경 함수들이 담겨있음.

이를 구조분해할당으로 내보내준다.

3. 사용할 때는 dispatch 안에서 사용한다.

import {changeName} from "../store.js";
  let dispatch = useDispatch();
...
  <td><button onClick={() => {
      dispatch(changeName())
    }}>+</button></td>

4. 변수를 전달해야할 때

addCount(state, action) {
  state[action.payload].count++;
} 

위와 같이 action 안에 payload에 변수가 담긴다.

이를

stock.map((v,k) => {
  return (
    <tr key={k}>
      <td>{k+1}</td>
      <td>{ stock[k].name }</td>
      <td>{ stock[k].count }</td>
      <td><button onClick={() => {
        dispatch(addCount(k))
      }}>+</button></td>
    </tr>
  )
})

위와 같이 사용하면 된다.