Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
utterances-bot opened this issue Mar 25, 2021 · 9 comments
Open

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

utterances-bot opened this issue Mar 25, 2021 · 9 comments

Comments

@utterances-bot
Copy link

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

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

Copy link

Dumonem commented Mar 25, 2021

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

Copy link

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

Copy link

덕분에 편하게 배웠슴다

Copy link

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

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

Copy link

remix-run/react-router#8264 (comment) 링크가 제대로 안 걸려서 코드 첨부 드립니다.

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");

Copy link

bsj805 commented Jun 11, 2022

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

Copy link

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

Copy link

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

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

Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants