Redux (1) state 보관 및 사용

Redux:

state를 여러 Component에서 사용해야 하는 경우,

props 없이 state를 공유하면서, 작업의 편의성을 높여주는 라이브러리.

 

redux store.js 파일 내에 state들을 저장하고

여러 Component에서 꺼내 쓴다.

 

세팅:

 

1. 터미널에서 redux 설치

 

npm install @reduxjs/toolkit react-redux 

 

2. store.js 파일 생성

 

3. store.js 파일 내에 코드 복붙

 

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
	reducer: {
    
    }
})

 

4. index.js 에 코드 추가

 

import store from './store.js'

<Provider store={store}>
	<App />
</Provider>

 

store.js 에서 export한 configureStore 을 index.js. 에서 store 라는 변수로 받아서 사용

 

 

Redux store에 state 보관하기(createSlice 사용)

 

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

let user = createSlice({		// useState 역할
	name: 'user',
    	initialState: 'hajongon'
})

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

export default configureStore({
	reducer: {		// 여기에 등록해야 사용할 수 있다.
    	user: user.reducer	// .reducer 필수, 작명 자유
        stock: stock.reducer
    }
})

 

원하는 컴포넌트 가서 사용하기

import { useSelector } from "react-redux"	// 불러오는 도구

function Component1(){

	let state = useSelector((state) => state)	// state.user만 불러와서 갖다쓸 수도 있다.
    	console.log(state)		// => { user: "hajongon", stock: [10, 11, 12] }
    	console.log(state.user)		// => hajongon
    	console.log(state.stock)	// => [10, 11, 12]
   
}