[React] Redux 사용해보기 기초

리덕스 설치

npm install @reduxjs/toolkit react-redux

 

 

index.js에 redux추가

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

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

 

 

src에 store.js파일 생성

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

let user = createSlice({
    name : 'state이름',
    initialState : 'state값'
})

let stock = createSlice({
    name: "state이름2",
    initialState: [10, 11, 12],
})

export default configureStore({
    reducer: {
        state1 : state이름.reducer,
        state2 : state이름2.reducer
    },
});

 

 

redux로 받아온 state 사용할 js 파일

import { useSelector } from "react-redux"

function Cart(){
    let a = useSelector((state)=>{ return state })
    //store.js에 있는 모든 state가 a에 저장됨.
    console.log(a);
    return (
        {/* 생략 */}
    );
}

import { useSelector } from "react-redux"

function Cart(){
    let a = useSelector((state)=> state.state1 )
    //state1 자료만 불러올 수도 있다.
    return (
        {/* 생략 */}
    );
}