react redux 설정하기

[주인장]

1. 설치 

- react와 react-dom 버전이 18.2 이상인지 확인하고 설치한다.

npm install @reduxjs/toolkit react-redux

2. store.js 파일 설정 

import { configureStore } from "@reduxjs/toolkit";

export default configureStore({

  reducer: {

  },

})

3. index.js 설정 

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

  <React.StrictMode>

    <Provider store={store}>

      <BrowserRouter>

        <App />

      </BrowserRouter>

    </Provider>

  </React.StrictMode>

);

4. store.js 파일에 state 정보 설정

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

let user = createSlice({

    name: 'user',                        // state 의 이름

    initialState: 'kim',                        // 초기값    

});

let stock = createSlice({

    name: 'stock',                        // state 의 이름

    initialState: [10, 11, 12],                        // 초기값    

});

export default configureStore({

    reducer: {

        user : user.reducer,            // user 라는 이름으로 user.reducer 를 사용(등록)

        stock : stock.reducer,          // stock 라는 이름으로 stock.reducer 를 사용(등록)

    },

});

5. 사용하기 

const Cart = () => {

  let state = useSelector((state) => {

    return state;

  });

  console.log(state.user, state.stock);

  return();

}