[코딩애플;React]Redux - state변경하기

1.Redux의 State 변경하는 방법

 1)slice안에 state안에 넣어주는 함수 만들기

 

let user = createSlice({

    name: 'user',

    initialState :'kim',

    reducers:{

        changeName(state){

            return 'john '+ state

        }

       

    }

})

 

2)다른 곳에 export 하기

 

export let {changeName } = user.actions

 

3)원하는 곳에 import 해오기 + dispatch

 

import { useDispatch, useSelector } from 'react-redux';

import { changeName } from '../store';

 

 ...생략...

 

<td><button onClick={()=>{dispatch(changeName())}}>+</button></td>

 

 

2.state가 배열/객체인 경우

let user = createSlice({

    name : 'user',

    initialState : {name : 'kim', age : 20},

    reducers : {

      changeName(state){

        state.name = 'park'

      }

    }

  })

 

이런 식으로 직접 변경도 가능. 리덕스 안에 immer.js라이브러리가 state사본을 하나 더 생성해주기 때문에.

 

📚버튼 클릭하면 나이가 증가하는 기능

-변경함수 만들기

    changeAge(state,action){

             state.age += action.payload;

        }

변경함수 두번째 파라미터에 넣은 자료들은 두번째파라미터이름.payload하면 나옴.

-보통은 action으로 작명함

-action.type하면 state변경함수가 이름이 나오고

-action.payload 하면 파라미터가 나옴.

 

3.이렇게 복잡한 이유

컴포넌트에서 state를 직접 수정해버리면 프로젝트가 커져버리면 오류나 버그가 생길 때 찾기 어려워짐. 이럴때 수정함수를 미리 만들어 두면 버그찾기가 쉽다. 무조건 수정함수를 만든 파일에서 찾을 수 있으므로.

 

-코드가 길면 파일분할이 가능함.

따로 파일에 아래처럼 저장하면 됨.

 

 

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

let user = createSlice({

    name: 'user',

    initialState :{name:'kim', age:30},

    reducers:{

        changeName(state){

            return 'john '+ state

        },

        changeAge(state,action){

             state.age += action.payload;

        }

    }

})

export let {changeName,changeAge } = user.actions

export default user

 

 

📚장바구니 count수 추가기능

 

변경함수 추가 후 내보내기

let data = createSlice({

    name: 'order',

    initialState :[

        {id : 0, name : 'White and Black', count : 2},

        {id : 2, name : 'Grey Yordan', count : 1}

      ] ,

        reducers:{

        plusCount(state,action){

           let 번호 =state.findIndex((a)=>{return a.id == action.payload})

           state[번호].count +=1

         

        }

    }

})

export let {plusCount } = data.actions

 

-사용할 페이지에서 import

import { changeAge, plusCount} from '../store';

 

-기능 추가 하기

{

                    a.data.map(function(b,i){

                     return(

                        <tr>

                        <td>{b.id}</td>

                        <td>{b.name}</td>

                        <td>{b.count}</td>

                        <td><button onClick={()=>{dispatch(plusCount(b.id))}}>+</button></td>

                        </tr>

                     )

                    })

                }

 

📚디테일 페이지에서 주문추가 하면 장바구니에 추가 되는 기능

변경함수 추가

     addItem(state,action){

            state.push(action.payload)

        }

 

-변경함수 내보내기

export let {plusCount ,addItem} = data.actions

 

-사용할 페이지에서 import

import {addItem} from '../store'

import { useDispatch } from "react-redux";

 

  let dispatch = useDispatch()

 

-사용할 곳에 기능 추가

     <div className="col-md-6">

            <h4 className="pt-5">{찾은상품[id].title}</h4>

            <p>{찾은상품[id].content}</p>

            <p>{찾은상품[id].price}</p>

            <button className="btn btn-danger" onClick={()=>{dispatch(addItem({id :1, name : 'Grey Yordan', count : 1}))}}>주문하기</button>

          </div>