React - Redux(2) store에 state 보관하고 쓰는 법

Redux라이브러리를 왜 쓴다고 했냐면 

state를 Redux store에 보관해둘 수 있는데 모든 컴포넌트가 거기 있던 state를 직접 꺼내쓸 수 있어

props없어도 편리하게 state공유가 가능하다고 했습니다. 

이번에는 Redux store에 state보관하는 법을 알아봅시다.

 

 

 

Redux stroe에 state 보관하는 법

저번시간에 만든 store.js에 아래와 같이 코드를 짜면 state하나를 만들 수 있습니다.

1. createSlice()로 state 만들고
2. configureStore()안에 등록합니다.

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

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

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

좀 더 자세히 설명해보면

1.  createSlice() 상단에서 import 해온 다음에 { name : 'state이름',  initialState: 'state값'} 하면 state 하나 생성가능합니다.
2.  state 등록은 configureStore() 안에 하면 됩니다. ( { 작명(아무거나) : createSlice만든거.reducer } 이러면 등록끝입니다. 여기 등록한 state는 모든 컴포넌트가 자유롭게 사용가능합니다. ) 

 

 

 

Redux store에 있던 state 가져다쓰는 법

아무 컴포넌트에서 useSelector((state)=>{return state}) 쓰면 store에 있던 모든 state가 그자리에 남습니다. 

(Cart.js)

import { useSelector } from "react-redux"

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

  return (생략)
}

한번 변수에 저장해서 출력해보겠습니다.

잘 출력됩니다. 

state를 하나 더추가해서 출력해보겠습니다.

stock이라는 state를 하나 더추가하고 

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

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

let stock = createSlice({
    name : 'stock',
    initialState : [10, 11, 12]
})

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

콘솔에서는 아래와 같이 출력해보겠습니다.

console.log(a)를하면

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

를 해보면 

let a = useSelector((state)=>{return state.stock})
console.log(a);

 

참고할 점 

redux를 사용할 때 간단한 state를 만들 때, 컴포넌트가 몇개 없을 때는 그냥 props쓰는게 더 코드가 짧습니다. 

 

 

 

응용

아래의 데이터를 store에 보관해두었다가 Cart.js에 가져와서 데이터 바인딩해보겠습니다. 

[
  {id : 0, name : 'White and Black', count : 2},
  {id : 2, name : 'Grey Yordan', count : 1}
]

먼저 store에 데이터를 저장해줍니다. 

let stock = createSlice({
    name : 'stock',
    initialState : [
        {id : 0, name : 'White and Black', count : 2},
        {id : 2, name : 'Grey Yordan', count : 1}
      ] 
})

export default configureStore({
  reducer: {
    stock : stock.reducer
  }
})

 

그리고 데이터를 가져올 페이지에서 아래와 같이 데이터를 바인딩해줍니다. 

map을 이용하여 데이터의 개수만큼 반복적으로 데이터를 보여줍니다. 

import { Table } from 'react-bootstrap'
import { useSelector } from 'react-redux'
function Cart() {

    let state = useSelector((state) => { return state.stock })
    return (
        <div>
            <Table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>상품명</th>
                        <th>수량</th>
                        <th>변경하기</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        state.map(function (a,i) {
                            return (
                                <tr>
                                    <td>{i}</td>
                                    <td>{state[i].name}</td>
                                    <td>{state[i].count}</td>
                                    <td></td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </Table>
        </div>
    )
}

export default Cart

 

결과화면입니다.

데이터가 잘 가져와집니다.