React - Redux 셋팅

React Redux

Redux란 javascript의 상태(데이터) 관리 라이브러리로 본질은 Node.js의 모듈이다.

React 에서 Redux를 사용하여 props로 단계별로 내려 사용하지않고 컴포넌트들 간의 데이터 사용이 자유로워진다.

 

Redux를 설치하기위해 터미널에 명령어를 입력한다.

npm install @reduxjs/toolkit react-redux

Redux를 설치하면 이러한 로그가 나타난다.

 

redux로 데이터를 저장하기위해 store.js 파일을 만들어 스토어를 생성한다.

// store.js
// configureStore와 createSlice를 사용할 수 있도록 불러온다.
import { configureStore, createSlice } from '@reduxjs/toolkit'

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



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

createSlice는 이름, 초기값, reducer 함수를 담은 객체를 인자로 받아서 액션타입과 생성자 타입을 자동으로 만들어준다.

configureStore는 createStore를  추상화 한 것이다.

 

생성된 store를 index.js에서 받아와 Provider로 불러 하위 태그에서 사용 할 수 있도록 한다.

// index.js
// store.js 의 store를 불러온다.
import store from './store.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  
  // Provider로 데이터 사용할 수 있도록 한다.
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider >
  </React.StrictMode>
);

 

cart.js 에서 redux 로 저장된 상태(데이터)를 불러온다.

// cart.js
// useSelector를 불러와 사용한다.

import { useSelector } from 'react-redux';

function Cart() {
	
    // 
    let user = useSelector((state) => { return state })
    console.log(user);

	...

useSelector란 Redux의 store의 상태값을 반환해주는 hook이다.

 

 

 

반응형

 

 

 

 

Redux를 통해 store.js 에서값을 가져와 cart.js에서 값을 보여준다.

 

store의 여러개의 데이터 전송도 가능하다.

// store.js

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

// 1번째 데이터
let user = createSlice({
    name : 'user',
    initialState: 'zelord',
});

// 2번째 데이터
let product = createSlice({
    name: 'product',
    initialState: ['hat', 'shirt', 'glove'],
})

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

데이터가 2개 나타난다.