react redux 설치 및 객체, 배열 업데이트

redux
사용이유 : 컴포넌트 간 state공유를 위해


https://redux-toolkit.js.org/introduction/getting-started

Getting Started | Redux Toolkit

 

npm install @reduxjs/toolkit
npm install react-redux

store.js 파일생성

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

export default configureStore({
  reducer: {},
});
createSlice({
  name: "state이름",
  initialState: "값",
});

//store.js
import { configureStore, createSlice } from "@reduxjs/toolkit";

let cartState = createSlice({
  name: "cartState",
  initialState: [],
});

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


// cart.js 해당 페이지에서 콘솔찍어보기
 let a = useSelector((state) => state);
  console.log(a);

index.js에 provider 호출

  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>

Getting Started | Redux Toolkit

---

추가설명 - 객체와 배열상태 업데이트

1: Redux 상태에서 어레이 업데이트
Redux 상태에 항목 배열이 있고 해당 배열 내의 항목을 추가, 제거 또는 업데이트하고 싶다고 가정해 보겠습니다.

Redux store 설정하는 건 똑같습니다

// store.js

import { configureStore } from '@reduxjs/toolkit';
import itemsReducer from './reducers/itemsSlice';

const store = configureStore({
  reducer: {
    items: itemsReducer,
  },
});

export default store;

항목 관리를 위한 조각 생성 :

항목 배열을 관리하기 위한 작업과 리듀서가 포함된 슬라이스를 만듭니다.

// reducers/itemsSlice.js

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

const itemsSlice = createSlice({
  name: 'items',
  initialState: [],
  reducers: {
    addItem: (state, action) => {
      state.push(action.payload);
    },
    removeItem: (state, action) => {
      return state.filter(item => item.id !== action.payload.id);
    },
    updateItem: (state, action) => {
      const index = state.findIndex(item => item.id === action.payload.id);
      if (index !== -1) {
        state[index] = { ...state[index], ...action.payload };
      }
    },
  },
});

export const { addItem, removeItem, updateItem } = itemsSlice.actions;
export default itemsSlice.reducer;

React 구성 요소에서 슬라이스 작업을 사용하세요.

React 구성 요소에서는 슬라이스의 작업을 사용하여 Redux 상태의 항목 배열과 상호 작용할 수 있습니다.

// components/ItemList.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addItem, removeItem, updateItem } from '../reducers/itemsSlice';

const ItemList = () => {
  const items = useSelector(state => state.items);
  const dispatch = useDispatch();

  const handleAddItem = () => {
    const newItem = { id: Date.now(), name: 'New Item' };
    dispatch(addItem(newItem));
  };

  const handleRemoveItem = (item) => {
    dispatch(removeItem(item));
  };

  const handleUpdateItem = (item) => {
    const updatedItem = { ...item, name: 'Updated Item' };
    dispatch(updateItem(updatedItem));
  };

  return (
    
    <div>
      <div>
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => handleRemoveItem(item)}>Remove</button>
            <button onClick={() => handleUpdateItem(item)}>Update</button>
          </li>
        ))}
      </ul>
    </div>
      <ul>
        {items.
      <ul>
        {items

          <li key={item.id}>
            {item.name}
            <button onClick={() => handleRemoveItem(item)}>Remove</button>
            <button onClick={() =>

          <li key={item.id}>
            {item.name}
            <button onClick={()

          <li key={item.id}>
            {item.name}
            <button onClick

         

  );
};

export default ItemList;

2: Redux 상태의 객체 업데이트
이제 사용자 프로필과 같은 Redux 상태의 개체를 업데이트하는 것을 고려해 보겠습니다.

Redux 스토어를 설정하세요 .

Redux 스토어를 구성하려면 이전 예시와 동일한 단계를 따르세요.

사용자 프로필 관리를 위한 슬라이스 생성 :

사용자 프로필 객체를 관리하기 위한 작업과 리듀서가 포함된 조각을 만듭니다.

// reducers/userSlice.js

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

const userSlice = createSlice({
  name: 'user',
  initialState: { id: null, name: '', email: '' },
  
 
reducers: {
    
   
updateUser: (state, action) => {
      return { ...state, ...action.payload };
    },
  },
});


    },
  },
export const { updateUser } = userSlice.actions;
export default userSlice.reducer;

React 구성 요소에서 슬라이스 작업 사용 :

React 구성 요소에서 updateUser작업을 사용하여 Redux 상태에서 사용자 프로필 개체를 업데이트합니다.

// components/UserProfile.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { updateUser } from '../reducers/userSlice';

const UserProfile = () => {
  const user = useSelector(state => state.user);
  const dispatch = useDispatch();

  const handleUpdateUser = () => {
    const updatedUser = { id: 1, name: 'Updated User', email: 'updated@example.com' };
    dispatch(updateUser(updatedUser));
  };

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      <button onClick={handleUpdateUser}>Update Profile</button>
    </div>
  );
};

export default UserProfile;

위 함수는 사용자 프로필 객체를 새 데이터로 업데이트하는 작업을 handleUpdateUser전달합니다.