Redux로 상태관리
- '글 작성하기'라는 같은 모달창을 두 가지 버튼으로 띄울 수 있게 하는 경우
한 곳에서만 글 작성 모달창을 띄울 때는
const [isOpen, setIsOpen] = useState(false)
const openModal = () => {
setIsOpen(true)
}
const closeModal = () => {
setIsOpen(false)
}이런 식으로 컴포넌트 내에서 모달창을 열 수 있는 state값을 만들어서 사용하면 된다.
하지만 글 작성 모달창을 띄우는 버튼이
각각 다른 컴포넌트에 속해 있다면,
useState로 만들어낸 state로는 모달창 관리가 어렵다.
그렇기 때문에 Redux에서 공통으로 사용할 isOpen state를 만들어서 사용하면 된다.
isOpenSlice.js
const initialState = {
state: false
};
const storeAddSlice = createSlice({
name: 'storeAdd',
initialState,
reducers: {
openStoreModal: (state, action) => {
state.state = action.payload;
return state;
},
closeStoreModal: (state, action) => {
state.state = action.payload;
return state;
}
}
});이렇게 Slice를 생성해 주고,
open / close 액션을 export해서 필요한 컴포넌트에서 사용하면 된다!
컴포넌트.jsx
const dispatch = useDispatch();
const openModal = () => {
dispatch(openStoreModal(true));
};onClick에 인라인으로 함수를 작성하지 않기 위해
openModal이라는 함수를 따로 만들고,
버튼에 onClick={openModal} 을 적어주면 된다!
