[React] Redux 셋팅 / state 만들기

props 없이 state 공유가능

공유가 필요없을 경우 그냥 useState() 사용하기

 

Redux 셋팅

1. 아무위치에 store.js 파일 만들기(state 들을 보관하는 파일)

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

 

2. index.js 에서 store.js - import 

3. <Provider store={import해온거}> 으로 <App/> 감싸기 => <App> + 모든 자식 컴포넌트에서 store.js 에 있는 state 사용가능

import { Provider } from 'react-redux';
import store from './store.js';

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
      <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

 

state 사용법

1. store 에 state 보관

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

//useState() 의 역할
// state 하나 : slice
// 변수에 담기
let 변수명 = createSlice({
  name : 'state 이름',
  initialState : 'state 값' => state 값 : array, object 다 가능
})

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

})

export default configureStore({
  // 만들어진 state 를 reducer 안에 등록해야 사용가능
  reducer: { 
	작명 : 변수명.reducer   // 모든 컴포넌트에서 state 사용가능
  }
})

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

 

2. 컴포넌트에서 state 사용하기(cart.js)

useSelector((state) => { return state }) : 모든 state 가져오기

useSelector((state) => { return state.state명 }) : 특정 state 가져오기

{ return } 생략가능 ---> ex) useSelector((state) => state ) 

import { Table } from "react-bootstrap";
import { useSelector } from "react-redux";

function Cart(){
	
    // store 에 있던 모든 state를 가져옴
    let a = useSelector((state)=>{return state}) 
    // object 형태로 저장되기 때문에 변수명.reducer에 저장한 state명으로 출력가능
    console.log(a.user)
    
    // store 에 있는 user state 만 가져오기
    let a = useSelector((state)=>{return state.user}) 
    
    return(
    )
}

 

3. Redux store 활용

store.js

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


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

export default configureStore({
  reducer: { 
    first : first.reducer,
    second : second.reducer
  }
})

 

cart.js

import { Table } from "react-bootstrap";
import { useSelector } from "react-redux";

function Cart(){

    let product = useSelector((state)=>{return state})
    return(
        <div>
            <Table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>상품명</th>
                        <th>수량</th>
                        <th>변경하기</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        {
                            product.first.map(function(a,i){
                                return(
                                    <td>{a}</td>
                                )
                            })
                        }
                        <td>안녕</td>
                    </tr> 
                    <tr>
                    {
                            product.second.map(function(a,i){
                                return(
                                    <td>{a}</td>
                                )
                            })
                        }
                        <td>안녕</td>
                    </tr>
            </tbody>
        </Table> 
      </div>
    )
}

export default Cart;

 

4. 수정 코드

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

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


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

import { Table } from "react-bootstrap";
import { useSelector } from "react-redux";

function Cart(){

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

export default Cart;