7. thunk에서 라우터 연동하기 · GitBook

[utterances-bot]

7. thunk에서 라우터 연동하기 · GitBook

https://react.vlpt.us/redux-middleware/07-router-with-thunk.html

[Dumonem]

안녕하세요 리액트 공부중입니다. 이전 내용까지는 모두 실습하여 따라왔으나 이부분만 문제가생겨 문의합니다. Router 사용시 URL의 주소는 이동하나 페이지가 하얀색으로 아무것도 나오지 않고있습니다. https://github.com/Dumonem/learn-redux-middleware- 혹시 잘못되어있는부분이 있다면 조언을 얻고싶습니다.

[neosigmund]

Router를 사용하면 PostContainer의 useEffect가 적용되지 않아 빈 화면이 됩니다. (useEffect 바디 내에 다른 코드를 넣어봐도 다 실행되지 않습니다.) 그 상태에서 새로고침해야지만 적용되네요. BrowserRouter를 사용하면 history 쓸수 없다고 콘솔에 뜨고.. 왜 그러는지 감을 못잡겠네요.

[josunyjostar]

덕분에 편하게 배웠슴다

[wickedGG]

react-router-dom v6로 올라가면서 history.push('/'); 가 제대로 동작되지 않는 현상이 있습니다. useNavigate()을 활용해서 해결하려고 했으나 function() 안에서 동작하는 특징과 ui를 return 부분에서만 동작되는 문제가 있어서 useNavigate()을 활용하지는 못했고

https://github.com/remix-run/react-router/issues/8264#issuecomment-991271554에서 방법을 찾아서 해결했습니다.

[wickedGG]

https://github.com/remix-run/react-router/issues/8264#issuecomment-991271554 링크가 제대로 안 걸려서 코드 첨부 드립니다.

import { createBrowserHistory } from 'history'; import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';

let history = createBrowserHistory();

function App() { return (

// The rest of your app

); }

history.push("/foo");

[bsj805]

v6에 올라와서 제가 제시하는 대안은 useNavigate()를 dispatch와 함께 넘겨서 thunk함수의 사용성을 최대화 하는 방향입니다.

import {useDispatch, useSelector} from "react-redux";
import {useEffect} from "react";
import {getPost, goToHome} from "../modules/posts";
import Post from "../components/Post";
import {useNavigate} from "react-router-dom";

function PostContainer({postId}) {
  const {data, loading, error} = useSelector(state => state.posts.post);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  useEffect(() => {
    dispatch(getPost(postId));

  }, [postId, dispatch]);

  if (loading) {
    return <div>로딩중...</div>;
  }
  if (error) {
    return <div>에러 발생!</div>;
  }
  if (!data) {
    return null;
  }

  return (
    <>
      <button onClick={() => dispatch(goToHome(navigate))}>홈으로 이동</button>
      <Post post={data} />
    </>
  );
}

export default PostContainer;

posts.js는

export const goToHome = (navigate) => (dispatch, getState) => {
  navigate("/");
}

[clean-teach]

@bsj805 알려주신 방법대로 진행해봤는데, goToHome 함수에서 dispatch, getState 를 콘솔로 찍어봤을때 올바르게 찍히지 않는 것 같습니다. 혹시 해당 함수에서 dispatch, getState를 접근할 수 있는 방법이 따로 있는건가요?

[ByoungSuk]

위에 분에 코멘트 보고 다시 작성해 보왔습니다.

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { legacy_createStore as createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import rootReducer from './modules'; import logger from 'redux-logger'; import { composeWithDevTools } from 'redux-devtools-extension'; import thunk from 'redux-thunk'; import { unstable_HistoryRouter as Router } from 'react-router-dom'; import { createBrowserHistory } from 'history';

const customHistory = createBrowserHistory();

const store = createStore( rootReducer, composeWithDevTools( applyMiddleware(thunk.withExtraArgument({ history: customHistory }), logger) ) );

const root = ReactDOM.createRoot(document.getElementById('root')); root.render(

);

// 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();

[minsuhan1]

@clean-teach 다른 thunk 함수와 같은 방법으로 사용하시면 됩니다.

export const goToHome = (navigate) => (dispatch, getState) => {
  console.log(getState().posts);
  dispatch({type: 'GET_POSTS'})
  navigate("/");
};