Redux_4

Redux에서 object/array 변경하는 법

import { configureStore } from '@reduxjs/toolkit';
import cart from './userSlice';

const cart = createSlice({
  name: 'cart',
  initialState: { name : 'kim' age : 20},
  reducers: {
  	* changeName(state)의 state는 기존 state를 말합니다.
  	changeName(state) {
    	return '값2'
    }
    changeName2(state) {
    	return '값3'
    }
  },
});

* 오늘쪽 자료를 변수로 빼는 문법
export let { changeName, changeName2 } = cart.actions;

Redux의 state가 배열/Object일 경우 다른 파일에서
{state.cart.name} 혹은 {state.cart.age}를 하게되면 출력할 수 있습니다.

array/object의 경우 직접 수정해도 state를 변경할 수 있습니다.

const cart = createSlice({
  name: 'cart',
  initialState: { name : 'kim' age : 20},
  reducers: {
  	* changeName(state)의 state는 기존 state를 말합니다.
  	changeName(state) {
    	state.name = 'park'
    }
    increate(state) {
    	state.age += 1
    }
  },
});

export let { changeName, increate } = cart.actions;

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

const Cart = () => {
  const cart = useSelector((state) => state );

  const dispatch = useDispatch();
  * dispatch는 changeName() 함수를 실행해달라고 store.js에 부탁하는 역할을 합니다.


  return (
    <div>
    {state.cart}의 장바구니
      <button
        onClick={() => {
         	dispatch(increase());
        }}>
         추가
      </button>
    </div>
  );
};

export default Cart;

혹시 +1이 아닌 +10, +20을 해주고 싶은경우에는???

const cart = createSlice({
  name: 'cart',
  initialState: { name : 'kim' age : 20},
  reducers: {
  	* changeName(state)의 state는 기존 state를 말합니다.
  	changeName(state) {
    	state.name = 'park'
    }
    increate(state, action) {
    	state.age += action.payload
    }
  },
});

export let { changeName, increate } = cart.actions;

increate(state, action) {
	state.age += action
}

이럴경우
increase(10)은 10을 추가해주고 increase(20)을하면 20을 더해줍니다.
state.age += action.payload
꼭 payload를 붙여주셔야 합니다.

이런 코드가 길면 코드를 다른 파일로 옮기면 된다
import, export와 함께!!!

저는 service 폴더 안에 userSlice.js 파일을 따로 만들어서 관리해줄 수 있습니다.

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

const cart = createSlice({
  name: 'cart',
  initialState: [
    { id: 0, name: 'White and Black', count: 2 },
    { id: 2, name: 'Grey Yordan', count: 1 },
  ],
  reducers: {
    increase(state, action) {
      const num = state.findIndex((a) => {
        return a.id == action.payload;
      });
      state[num].count++;
      //state[action.payload].count++;
    },
  },
});
export let { increase, addItem, sameItem } = cart.actions;

export default cart;

기존의 Redux파일은

import { configureStore } from '@reduxjs/toolkit';
import cart from './userSlice';

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

이런식으로 작성해주고

Redux안에있는 state를 import해서 사용하는 파일들의 import 경로를 변경해주면 사용할 수 있습니다.
import 경로를 store.js -> userSlice.js로 변경!!

끝!!!