react react-redux

설치부터 하고 정리하자.
redux-promise와 redux-thunk는 이번에는 필요없다. 필요하면 검색~

PS C:\Dev64\workspace\project> npm install react-redux@7.2.6 redux@4.1.2 redux-promise@0.6.0 redux-thunk@2.4.1

PS C:\Dev64\workspace\project> npm ls                            
project@0.1.0 C:\Dev64\workspace\project
+-- @testing-library/jest-dom@5.16.2
+-- @testing-library/react@12.1.2
+-- @testing-library/user-event@13.5.0
+-- bootstrap@4.6.0
+-- react-bootstrap@1.6.4
+-- react-dom@17.0.2
+-- react-redux@7.2.6
+-- react-router-dom@6.2.1
+-- react-scripts@5.0.0
+-- react@17.0.2
+-- redux-promise@0.6.0
+-- redux-thunk@2.4.1
+-- redux@4.1.2
`-- web-vitals@2.1.4

대충 index.js의 예제 코드는 다음과 같다. 기록해 두자.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from "react-redux";
import {combineReducers, createStore} from "redux";
import data from "./data";

const roomState = {rooms: data, backup: data}

const roomReducer = (state = roomState, action = {}) => {
    if (action.type == 'inform') {
        const id = parseInt(action.payload.id);
        const copyRooms = [...state.rooms];
        const idx = copyRooms.findIndex((v) => v.id === id);
        copyRooms[idx].inform_count++;
        return Object.assign({}, state, {rooms: copyRooms});
    } else {
        return state;
    }
};

const store = createStore(combineReducers({rooms: roomReducer}));

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

실제 state를 참조하는 component 예제다.

중요한 것은 props나 ContextApi를 사용하지 않아도 useSelector()를 통해 최상위의 state에 접근하고, useDispatch()를 통해 action을 호출할 수 있다는 것이다. props로 전달하기 위해 connect를 쓰지 않아도 된다.

import {useDispatch, useSelector} from "react-redux";
import {Button, Col, Row} from "react-bootstrap";
import {FaRegBellSlash} from "react-icons/fa";


const Rooms = () => {
    const dispatch = useDispatch();
    const {rooms} = useSelector(state => state.rooms);
    return (
        <>
            <Row>
                {
                    rooms.map((v, i) => {
                        return (
                            <Col md={4} className={'room-box'} key={i}>
                                <h4>{v.title}</h4>
                                <img src={`${v.image}`} alt={v.title}/>
                                <p>{new Intl.NumberFormat('ko-KR', {style: 'currency', currency: 'KRW'}).format(v.price)}원</p>
                                <p>신고건수 : {v.inform_count}{` `}<Button variant={'danger btn-sm'} data-id={v.id} onClick={(e)=>dispatch({type:'inform',payload:{id:e.target.dataset.id}})}><FaRegBellSlash className={'mb-1'} /> 허위매물</Button></p>
                            </Col>
                        )
                    })
                }
            </Row>
        </>
    )

}

export default Rooms;

reducer의 action처리 등은 공식사이트 참고하고

https://react-redux.js.org/api/hooks#using-hooks-in-a-react-redux-app

Hooks | React Redux