[코딩애플;React]Redux - store에 state저장하기

1.Redux store에 state보관하는 법

 1) createSlice()로 state만들기

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

// let 변수명 =createSlice({

//     name: 'state이름',

//     initialState :'값'

// })

 

let user = createSlice({

    name: 'user',

    initialState :'kim'

})

let stock = createSlice({

    name: 'stock',

    initialState :[10,11,12]

})

 

2)configureStore( ) 안에 등록

export default configureStore({

    reducer:{

        // 작명 : user.reducer

        user: user.reducer,

        stock: stock.reducer,

        data : data.reducer

    }

})

 

3) state를 사용하고 싶은 컴포넌트로 이동해서 작성해주기

import { useSelector } from 'react-redux';

function Cart(){

   

  let a = useSelector((state)=>{return state})

 

//   원하는 것만 쓰는법(return과 중괄호도 생략가능)

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

    console.log(a) //{name: 'kim'}

 

 

 

📚숙제 : 데이터 가져와서 데이터 바인딩해보기

1)state 만들어주고

let data = createSlice({

    name: 'order',

    initialState :[

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

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

      ]

})

 

2)등록해주기

export default configureStore({

    reducer:{    

        data : data.reducer

    }

})

 

3)state 가져와주기

  let a = useSelector((state)=>{return state.data})

 

4)원하는 곳에 데이터 바인딩

        {

                    a.map(function(b,i){

                     return(

                        <tr>

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

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

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

                        <td>안녕</td>

                        </tr>

                     )

                    })

                }