Redux toolkit 에서 State 보관하고 사용하는 방법

보관하는 법

store.js

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

  let user = createSlice({

    name: "user",

    initialState: "kim",

  });

 

  export default configureStore({

    reducer: {

      user: user.reducer,

    },

  });

1. createSlice( ) 로 state 만들고

2. configureStore( ) 안에 등록 

1. createSlice( ) 상단에서 import 해온 다음에

{
  name : 'state이름',
  initialState : 'state값'
} 
이거 넣으면 state 하나 생성가능합니다. 

(createSlice( ) 는 useState( ) 와 용도가 비슷하다고 보면 됩니다)

 

2. state 등록은 configureStore( ) 안에 하면 됩니다.

{ 작명 : createSlice만든거.reducer } 이러면 등록 끝입니다. 

여기 등록한 state는 모든 컴포넌트가 자유롭게 사용가능합니다. 

---

사용하는 법

  import { useSelector } from "react-redux";

  function Cart() {

    let a = useSelector((state) => state.user )

    console.log(a);

  return ();

  }

 이런식으로 꺼내서 써보면 된다.

---

응용

store.js

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

// 상품 슬라이스 생성
const productSlice = createSlice({
  name: "product",
  // 초기 상태
  initialState: [
    { id: 1, name: "Grey Yordan", count: 1 },
    { id: 2, name: "White and Black", count: 2 },
  ],
  reducers: {},
});

// 스토어 생성
export default configureStore({
  reducer: {
    product: productSlice.reducer,
  },
});

Cart.js

import React from "react";
import { Table } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import { useSelector } from "react-redux";

function Cart() {
  const products = useSelector((state) => state.product);
  console.log(products);
  return (
  <>
  {products.map((product) => (
    <tr key={product.id}>
      <td>{product.count}</td>
      <td>{product.name}</td>
      <td>300,000₩</td>
    </tr>
  ))}
  </>
  );
}