032. [코딩애플] [part2] Redux 2 store에 state 보관하고 쓰는 법

Redux store에 state 보관하기

1. 아래는 store 기본 세팅

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

2. 여기에서 createSlice import 추가.

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

export default configureStore({
  reducer: { }
}) 

3. store에 state 만들기

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

// 여기에 아래 규격으로 state를 만듦.

// name과 initialState는 정해진 키워드임. 객체에서 name이 key, initialState가 value라고 생각하면 됨)
let iveMember = createSlice({
    name: 'iveMember',
    initialState: '장원영'
})

export default configureStore({
  reducer: { }
})

4. 상태를 공유하기

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

// 여기에 아래 규격으로 state를 만듦.

// name과 initialState는 정해진 키워드임. 객체에서 name이 key, initialState가 value라고 생각하면 됨)
let iveMember = createSlice({
    name: 'iveMember',
    initialState: '장원영'
})

let ages = createSlice({
    name: 'ages',
    initialState: [21, 22, 23, 24, 25]
})

export default configureStore({
  reducer: {
    // 여기에서 state를 공유하면 됨.
    // .reducer는 정해진 키워드고 콜론 옆은 자유 작명이나, 보통 state 이름과 같이함.
        iveMember: iveMember.reducer
        ages: ages.reducer
    }
})

다른 컴포넌트에서 store에서 state 꺼내 쓰기

1. useSelector 훅 import하기

// components/cart.jsx 하위 컴포넌트

import { useSelector } from 'react-redux'

2. store에서 state 꺼내오기

function Cart() {

// 여기에서 state 꺼내서 변수에 넣어서 쓰면 됨.
let myStore = useSelector( (state) => { return state } );
// 그런데 위 myStore에는 iveMember와 age라는 state 두 개가 다 저장되어 불러져 온다.
// 따라서 만약 myStore라는 변수를 활용해서 아이브의 나이들만 가져오고 싶으면 myStore.ages로 접근하면 됨.
console.log(myStore.ages); // [21, 22, 23, 24, 25]

// 아니면 처음부터 쓸 state만 마침표 접근법으로 return 하면 됨.
let iveAges = useSelector ( (state) => { return state.ages } );
// 화살표 함수에서 return문 한 줄이므로, 중괄호와 return 키워드 생략해도 됨.
let iveAges = useSelector ( (state) => state.ages );

    return (
        <>
            <span>아이브 멤버들의 나이는 : {iveAges}세 입니다.</span>
        </>
    )
}

유의사항

1. 상태관리할 때 Redux가 무조건 좋다는 것은 아님. 기본 세팅하는 데 시간이 꽤 걸리므로, 단순한 프로젝트에서는 props를 내리는 게 더 빠르기도 함.

2. 굳이 컴포넌트 간 state를 공유할 필요가 없는 경우, 굳이 redux를 만들 필요가 없음.