redux 사용 시, state 값 초기화 문제

[김동연]

안녕하세요 redux 관련 질문드립니다.

문제점을 간단히 한줄로 작성하면 아래와 같습니다.
- dispatch로 값을 변경 후 state에 설정된 값이 undefined 으로 변경됩니다.

1. Reducer는 아래 코드에 별도로 작성하여 import 하여 사용하였습니다.

 

 

2. dispatch에 사용되는 함수(changeSelect)는 아래와 같이 정의하여 사용하였습니다.

 

 

3. state의 값을 확인하기 위해, div를 클릭 시 console에 state 값이 확인되도록 설정하였습니다. 제가 원하는 작업은 <div>태그를 클릭 시, state에 저장된 select 값이 100으로 변경되는것입니다.

let state = useSelector((state) => state)

let dispatch = useDispatch()

...

<div onClick={()=>{dispatch(changeSelect(100)); console.log(state)}}></div>

- 결과는 아래와 같습니다. 처음 <div> 태그를 클릭 시 state에 저장된 초기값은 잘 나오지만, 그 이후의 클릭 시 state에 저장된 select 값이 undefined로 변경됩니다.

{state.select} 와 같은 코드로 html에서 시각적으로 확인조차 불가능합니다.

 

dispatch 작업 후, { usehistory.push('/') } 같은 방법을 사용하여 해결하려 했지만 아래와 같은 에러가 발생하여 'useNavigate' 를 이용하여 아래와 같이 변경하여 사용하였습니다.

ERROR - 'useHistory' is not exported from 'react-router-dom'.

 

- CODE

import {useNavigate} from 'react-router-dom';

const navigate = useNavigate();
navigate('/') -> history.push 대신 사용

위 방법으로도 해결이 안되어 질문드립니다 ㅠㅠ 혹시 방법이 없을까요...

[김동연]

* 해결했습니다.

Reducer에서는 action.payload.category에서 값을 받아와 놓곤, changeSelect 함수에서는 payload: {select: value}로 전달하였군요...ㅠㅠ(이런 멍청한 실수를...)

changeSelect함수에서 payload: { category : value}로 고쳐주니 잘됩니다.

혹시 저와 같은 증상있으신분들은 오타 한번 다시 확인해보세요!!

[글쓴이]

글