React Redux 설치, 세팅, 사용하기

1. Redux 설치하기

npm install @reduxjs/toolkit react-redux

 

 

2. Redux 세팅하기

•  store.js파일 만들기
  • src/store.js에 기본 세팅 입력하기

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

 

• index.js 파일로 이동하기
  • Porovider와 store.js 를 import 하기
  • Porovider로 감싸기

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
        <App />
    </Provider>
  </React.StrictMode>
); 
// 생략

 

 

3. Redux 사용하기

• store.js에 입력하기
  • createSlice( ) 로 state를 생성 후 configureStore( ) 안에 등록하는 방식입니다. 
  • title.title에 심투의 블로그입니다. 라는 내용이 저장되는 방식입니다. 

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

let title = createSlice({
  name : 'title',
  initialState : '심투의 블로그입니다.'
})

let user = createSlice({
    name : 'user',
    initialState : 'SIM-TOO'
  })

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

 

• App.js에서 사용하기

import { useSelector } from "react-redux"

function App() {

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


  return (
    <div>
      <p>{test.title}</p>
      <p>안녕하세요</p>
      <p>여기의 작성자는 : {test.user}</p>
    </div>
  );
}

export default App;

 

• 배열 방식도 저장이 가능합니다.

let basket = createSlice({
  name : 'basket',
  initialState : [
    {id : 0, name : '빨간색사탕', count : 0},
    {id : 1, name : '노란색사탕', count : 1}
  ]
})

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