rematch

🔸 상황 설정 : 시세 조회 버튼을 만들었다.

맨 처음 방 타입 필터를 설정하면, 설정한 방 타입만 시세 조회 버튼에 들어가야 한다.

그러기 위해선 리매치를 통해 어떤 방 타입을 선택했는지 값을 관리해야함!

1. models - market-price 폴더 생성

import { createModel } from '@rematch/core';
import { RootModel } from '..';
import { TMarketPrice } from '~/@types/map';

const marketPrice = createModel<RootModel>()({
	//1. 초기값을 설정해준다. useState처럼!
	state: {
		selectRoomType: 999
	} as TMarketPrice //type 설정

	//2. 리듀서 작성
	reducer: {
		updateRoomType(state, payload: Partial<TMarketPrice>) {
			return {
				...state,
				...payload,
			};
		},
	},

	effects: dispatch => {
		return {
			//3. 다른 곳에서 쓰일 함수 이름 
			updateType(payload: Partial<TMarketPrice>) {
					//4.사용하는 리듀서 함수 불러오기
				dispatch.marketPrice.updateRoomType(payload);
...
...
...

export default marketPrice; 

2. models -

import { Models } from '@rematch/core'
import { marketPrice } from './marketPrice'

export interface RootModel extends Models<RootModel> {
    marketPrice: typeof marketPrice
}

export const models: RootModel = { marketPrice }

3. 폴더에 포함되지 않고 아예 바깥 영역(뭐라 불러야하지..) store.ts 생성

import { init, RematchDispatch, RematchRootState } from '@rematch/core'
import { models, RootModel } from './models'

// basic
export const store = init({
    models,
})

// dabang code
const devtoolOptions: DevtoolOptions = {};

if (process.env.NODE_ENV === 'development') {
  devtoolOptions.trace = true;
  devtoolOptions.disabled = false;
  
} else {
  devtoolOptions.disabled = true;
}

const store = init({
  models,
  redux: {
    devtoolOptions,
  },
});

export type Store = typeof store
export type Dispatch = RematchDispatch<RootModel>
export type RootState = RematchRootState<RootModel>

자 이제 리매치 적용 됐고 데이터를 먼저 업데이트 시켜보자

🔸 상황 설정: 방 타입이 원룸 투룸 오피스텔 선택 되어 있고 시세 조회에선 투룸이 선택된 상태.

근데 방 타입에서 투룸을 제거 했다. 그러면 시세회 조회 버튼은 원룸이 선택되도록 해야한다.

import { useDispatch } from 'react';
import { Dispatch } from '~/store';

//시세 조회 버튼 클릭시 함수
function changeRoomType(typeNum){
...

dispatch.marketPrice.updateType({ selectRoomType: typeNum });
...
}

🔸 상황 설정: 시세 조회 버튼 값을 리매치를 통해 업데이트 시켰다
그럼 이걸 이제 활용해서 맨 처음 상황을 위한 함수를 만든다 (시세 조회 버튼 액티브)

import { useSelector, useDisPatch } from 'react';
import { RootState, Dispatch } from '~/store';

const dispatch = useDispatch<Dispatch>();

const { filter, selectRoomType } = useSlector(({ map, marketPrice } : RootState) => ({
	filter: map.filter, 
	selectRoomTypeL marketPrice.selectRoomType,
}));

useEffect(() => {
	changeIsActive(filter.multi_room_type);
}, [filter.multi_room_type]);

function changerIsActive(filterType: number[]) {
	// 시세 조회 버튼이 뭐라도 선택되어 있는 상태고, 필터 타입에 시세조회타입이 포함되어 있지 않다면 
	if (filterType !== 999 && !filterType.includes(selectRoomType)) {
		//필터 타입 배열 중 제일 작은 값 
		const nextType = Math.min(...filterType);
		dispatch.marketPrice.updateTYpe({ selectRoomType: nextType }); // 업데이트!
	}}

hadler onClick = {() => dispatch... . handle(open)}

setHandle(state, payload: boolean) {
return {
...state,
open: payload,
};
},

handle(open: boolean, state) {
dispatch.requestContract.setHandle(open);
}

or 

setState(state, payload: Partial) {
return {
...state,
...payload,
};
},

handle(open: boolean, state) {
dispatch.requestContract.setHandle({open});
}