Redux: 문서: React Router와 함께 사용

나는 원래 범용 컨텍스트에서 반응 라우터를 사용하기 위해 서버 측 렌더링 예제를 작성했습니다. 반응 라우터와 함께 사용하면 자체 문서가 될 수 있다고 제안되었습니다. 문서에 섹션을 추가할 수 있을까요?

또한, 리액트 라우터가 보편적으로 사용되는 예를 추가하는 것에 대해 어떻게 생각하십니까?

real-world 예제를 보편적으로 수정하는 것이 좋은 생각이라고 생각합니다. 그렇게 하면 처음부터 아무것도 만들 필요가 없습니다.

액션 생성자에서 전환하려면 라우터 인스턴스를 액션 생성자에게 매개변수로 전달하십시오.

1.0beta에는 createRouter 개념(아직?)이 없기 때문에 이것은 0.13에서만 작동합니다. 맞습니까?

React 구성 요소 내에서 1.0.0-beta3으로 수행할 수 있습니다.

class Thing extends Component {
  static contextTypes = {
    router: PropTypes.object
  }

  handleThing() {
    this.props.actionCreator(this.context.router);
  }
}

@timdorr this.context 를 사용하는 것이 안전합니까? 나는 그것이 외부에서 사용되는 것이 아니라는 인상을 받았습니다.

예, 안전하지 않은 것이 아니라 문서화되지 않은 것입니다. 0.14에서 약간 변경되지만 이를 깨는 방식은 아닙니다. 나는 그것이 곧 어떤 시점에서 문서화될 것이라고 생각합니다.

@timdorr 1.0.0-beta3에서 액션 생성자와 다른 URL로 전환할 수도 있다는 뜻인가요?

예, 라우터 인스턴스를 작업 생성자에게 전달하면 전환을 포함하여 원하는 모든 작업을 수행할 수 있습니다.

나는 이것을 함께 던졌다 :

const loginProps = {
  handleLogin: ({email, password}) => store.dispatch(userLogin({email, password})),
};



const routes = (
  <Route path="/" handler={App}>
    <Route path="login" handler={wrapper(Login, loginProps)} />
    <Route handler={authSection}>
      <Route path="" handler={Index} />
      <Route path="users" handler={wrapper(Users, (() => store.dispatch(getUsers())))} />
      <Route path="logout" handler={wrapper(Login, (() => store.dispatch(userLogout())))} />
    </Route>
  </Route>
);

const router = createRouter({
  location: HistoryLocation,
  routes,
});

store.dispatch(receiveRouter({router}));

Warning: Failed Context Types: Required context `store` was not specified in `SmartComponent(TodoApp)`. Check the render method of `Router`.

무엇이 잘못되었을 수 있습니까?

추신: RR 1.0.0-베타3

@gyzerok real-world 예제가 하는 것처럼 전체 () => <Router>stuff</Router> 를 <Provider> $ 로 감싸야 합니다.

@gaearon 네, ofc. 나는 그것을 공급자가 아니라 대부분 당신의 공급자의 복사-붙여넣기인 내 자신의 구성요소에 포장합니다. 차이점은 스토어를 전달하지 않고 그 안에 스토어를 생성한다는 것입니다.

@gyzerok 코드를 보지 않고는 무엇이 잘못되었는지 말하기 어렵습니다. (그리고 별도의 호를 제출해 주세요. react-redux repo가 ​​좋은 곳입니다.)

real-wolrd 에 대한 Thx 예! 그러나 AsyncProps 는 어떻게 처리합니까? 이중 컨텍스트 조작이 함께 작동하지 않는 것 같습니다.

import React from 'react';                                                                                                                                                                                         
import {createStore} from 'redux';                                                                                                                                                                                 
import {Provider} from 'react-redux';                                                                                                                                                                              
import {Router, Route} from 'react-router';                                                                                                                                                                        
import BrowserHistory from 'react-router/lib/BrowserHistory';                                                                                                                                                      
import AsyncProps from 'react-router/lib/experimental/AsyncProps';                                                                                                                                                 

import App from './containers/App';                                                                                                                                                                                
import reducers from './reducers';                                                                                                                                                                                 

const store = createStoreWithMiddleware(reducers);                                                                                                                                                                 
const history = new BrowserHistory();                                                                                                                                                                               

React.render(                                                                                                                                                                                                       
    <Provider store={store}>                                                                                                                                                                                        
        {() =>                                                                                                                                                                                                      
            <Router history={history} createElement={AsyncProps.createElement}>                                                                                                                                     
                <Route component={AsyncProps}>                                                                                                                                                                      
                    <Route path="/" component={App} />                                                                                                                                                              
                </Route>                                                                                                                                                                                            
            </Router>                                                                                                                                                                                               
        }                                                                                                                                                                                                           
    </Provider>,                                                                                                                                                                                                    
    document.body                                                                                                                                                                                                  
);

그리고 App.js

import React from 'react';                                                                                                                                                                                         
import {connect} from 'react-redux';                                                                                                                                                                               

let App = React.createClass({                                                                                                                                                                                      
    statics: {                                                                                                                                                                                                     
        loadProps(params, cb) {                                                                                                                                                                                    
            // have to call this with AsyncProps                                                                                                                                                                   
        }                                                                                                                                                                                                          
    },                                                                                                                                                                                                             
    displayName: 'App',                                                                                                                                                                                            

    render() {                                                                                                                                                                                                     
        return <div children="this is app" />                                                                                                                                                                      
    }                                                                                                                                                                                                              
});                                                                                                                                                                                                                

export default connect(state => state)(App); 

connect 래퍼 없이도 작동하지만 redux 도 없습니다. 누구든지이 문제에 직면 했습니까?

아니면 데이터가 로드될 때까지 탐색을 일시 중지하는 다른 방법이 있습니까?

스태틱은 스태틱일 뿐입니다. connect() 결과를 포함하여 무엇이든 넣을 수 있습니다.

let App = React.createClass({                                                                                                                                                                                      
    displayName: 'App',                                                                                                                                                                                            

    render() {                                                                                                                                                                                                     
        return <div children="this is app" />                                                                                                                                                                      
    }                                                                                                                                                                                                              
});                                                                                                                                                                                                                

App = connect(state => state)(App); 

App.loadProps = function loadProps(params, cb) {                                                                                                                                                                                    
  // have to call this with AsyncProps                                                                                                                                                                   
}                                                                                                                                                                                                          

export default App; 

@gaearon 죄송합니다. 예시가 부족합니다. 정적 소품이 누락되어 connect 결과를 확장하려고 시도했지만 컨텍스트에 실제 문제가 있습니다. 시간을 주세요. 전체 예제를 별도의 저장소로 푸시하겠습니다.

내가 현재 조사하고 있는 또 다른 것은 명확하고 눈에 거슬리지 않는 방식으로 redux 저장소에 params를 저장하는 것입니다. 몇 가지 접근 방식을 시도한 후 다음과 같이 작성했습니다.

<Route
  component={OrderDetails}
  path='/orders/:orderId'
  onEnter={({params}) => store.dispatch(setCurrentOrder(params.orderId))} 
/>

따라서 아래와 같이 선택기에서 매개변수를 참조할 수 있습니다.

export const OrderDetails = state => {
  const {order} = state;
  return {
    order: order.details.get(order.currentOrderId),
    orderId: order.currentOrderId,
    isLoading: order.isLoadingDetails,
    error: order.detailsLoadingError
  };
};

안정적인 react-redux-router 가 출시되면 아마 바뀔 것입니다.

좋은 소식: React Router 1.0 RC는 이제 우리가 필요로 하는 후크를 노출합니다.
https://github.com/acdlite/redux-react-router 를 확인하고 지금 마음에 드는지 알려주세요!

@gaearon react-router 및 실험적인 AsyncProps 문제를 발견했습니다. 반응을 업데이트하면 문제가 해결됩니다.

@wtfil 반갑습니다!

react-router와 통합할 때 이 스레드에서 라우터 인스턴스를 작업 생성자에게 전달하고 이에 대한 메서드를 호출할 수 있다는 것을 이해합니다. 그러나 나는 또한 액션 제작자가 가장 순수한 형태로 부작용이 없도록 의도되었다는 것을 이해합니다. 액션 생성자에게 부작용이 허용되는 유일한 경우는 미들웨어가 처리하는 비동기 액션일 때뿐입니다. 그렇다면 전환을 수행하는 액션 생성자가 순수 기능이 아니라 비동기식이어야 한다는 기대가 있습니까?

그렇다면 전환을 수행하는 액션 생성자가 순수 기능이 아니라 비동기식이어야 한다는 기대가 있습니까?

액션 제작자는 부작용이 있을 수 있습니다. 가능하면 피하는 것이 가장 좋지만 물론 어느 시점에는 필요합니다. 리듀서는 Redux에서 순수하고 Elm과 같은 명시적 효과 메커니즘이 없기 때문에(토론은 #569 참조) 액션 생성자는 넣어두는 곳.

redux-router 를 확인하십시오. React Router 위에서 작동하지만 작업을 디스패치하고 라우터 동기화를 처리할 수 있습니다.

React Router와 Redux Router가 모두 1.0에 도달하기를 기다리는 중...

네. 이 일이 발생한 후 레시피를 추가합니다.

그래서 저는 이 토론을 따라가며 라우팅이 일반적으로 redux에 어떻게 적용되는지에 대해 조금 생각했습니다(https://github.com/rackt/redux/issues/805 참조). 해당 스레드의 일부 토론과 일부 실험을 기반으로 개인적으로 react-router/react-redux-router 글루보다 선호하는 접근 방식을 찾았습니다.

기본적으로 react-router 또는 redux에 서로에 대한 정보를 제공하지 않고 대신 사용자 지정 기록 구현을 통해 연결하려고 합니다. 이 접근 방식을 사용하면 라우팅이 다음과 같이 처리됩니다.

1. route 에 대한 작업, 감속기 및 저장소의 키가 생성됩니다.
2. 표준 기록 구현(이 예제에서는 선호하는 createHistory 을 사용하지만 createHashHistory 또는 무엇이든 쉽게 사용할 수 있음)이 생성되고 수신됩니다. 브라우저의 현재 위치가 변경되면 ROUTE 작업이 전달되어 궁극적으로 해당 위치를 상점에 배치합니다.
3. 표준 react-router 인스턴스는 저장소의 route 키가 변경될 때 구독자(react-router)에게 알리는 두 번째 사용자 지정 기록 구현으로 생성됩니다. 또한 createHref 및 pushState 를 정의하고 둘 다 2단계에서 생성된 표준 기록에 위임합니다.

그게 다야 나는 그것이 redux와 react-router 사이에 상당히 명확한 업무 분리를 제공하고 다른 "접착제" 라이브러리를 가져올 필요가 없다고 생각합니다. 아래에 내 코드를 붙여넣고 있습니다. 피드백을 듣고 싶습니다.

// please pay attention to library versions, this strategy is only tested with the indicated versions
import React from 'react'; // v0.13.3
import { Provider } from 'react-redux'; // v3.1.0
import { Router, Route, IndexRoute, Link } from 'react-router'; // v1.0.0-rc3
import { createHistory } from 'history'; // v1.12.3
import { createStore } from 'redux'; // v3.0.2

// define some components
class About extends React.Component {
    render () {
        return (
            <div><h1>About</h1></div>
        )
    }
}
class Home extends React.Component {
    render () {
        return (
            <div>
                <h1>Home</h1>
                <Link to="/about">Go to about</Link>
            </div>
        )
    }
}

// create a standard history object
var history = createHistory();

// set up 'route' action and action creator
const ROUTE = 'ROUTE';
function createRouteAction (location) {
    return {
        type: ROUTE,
        payload: location
    };
}

// set up reducer. here we only define behavior for the route action
function reducer (state = {}, action) {
    if (action.type === ROUTE) {
        return Object.assign({}, state, {
            route: action.payload
        });
    }
    else {
        return state;
        // whatever other logic you need
    }
}

// create store
const store = createStore(reducer);

// this factory returns a history implementation which reads the current state
// from the redux store and delegates push state to a different history.
function createStoreHistory () {
    return {
        listen: function (callback) {
            // subscribe to the redux store. when `route` changes, notify the listener
            const unsubscribe = store.subscribe(function () {
                const route = store.getState().route;
                callback(route);
            });

            return unsubscribe;
        },
        createHref: history.createHref,
        pushState: history.pushState
    }
}

React.render(
    <Provider store={store}>
        {() =>
            <Router history={createStoreHistory()}>
                <Route path="/about" component={About} />
                <Route path="/" component={Home} />
            </Router>
        }
    </Provider>,
    document.getElementById('root') // or whatever
);

// when the url changes, dispatch a route action. this is placed at the bottom so that the first route triggers the initial render
const unlisten = history.listen(function (location) {
    store.dispatch(createRouteAction(location));
});

그건 그렇고, 이 예가 redux와 react-router를 함께 사용하는 데 어려움을 겪고 있는 나와 같은 사람들에게 도움이 될 수 있고 오늘 redux와 react-router를 함께 사용할 수 있다는 주장을 명확히 하는 데 도움이 될 수 있기 때문에 이 예를 언급합니다.

@cappslock 나는 그것을 좋아하지만 한 가지 작은 것이 있습니다. 귀하의 구현에서 경로 변경은 작업입니다. 이것은 "작업은 명령이 아닌 이벤트" 접근 방식을 깨고 결국 일부 불쾌한 관행으로 이어질 수 있습니다. 생각을 바꿔보자. 잠재적으로 모든 작업은 주소 표시줄(구성 요소 또는 실제 브라우저의 주소 표시줄....)을 변경하는 부작용을 초래할 수 있고 부작용으로 인해 새 작업( ROUTE_CHANGED )이 발송될 수 있습니다. API 호출을 트리거하는 것과 기본적으로 동일한 패턴입니다.

@tomkis1 피드백 주셔서 감사합니다. 내가 당신을 올바르게 이해한다면 이것은 실제로 이미 그렇게 작동합니다. ROUTE 액션은 URL 변경의 부작용으로 전달됩니다. ROUTE_CHANGED 가 더 나은 이름이 될까요?

오! 방금 두 번 확인했고 당신이 옳았습니다. 예 ROUTE_CHANGED 가 더 좋을 것입니다.

나도 그렇게 생각해. 다시 돌아가서 변경하겠지만 이 댓글은 정말 혼란스러울 것입니다. :)

흐름은 다음과 같습니다.

URL 변경 -> ROUTE (또는 ROUTE_CHANGED ) 작업 -> 리듀서 업데이트 저장소 -> 저장소 기록(이전에 저장소에 가입됨) 리스너에 알림 -> 반응 라우터 업데이트

나는 UI의 사용자 관찰 상태를 구동하는 상점 외에는 아무것도 원하지 않기 때문에 이것을 선호합니다. 테스트용으로도 좋을 것 같습니다.

이 접근 방식의 단점은 URL이 ROUTE_CHANGED 작업에 대한 응답으로 업데이트되지 않는다는 것입니다. 액션이 명령으로 처리되는 것을 원하지 않는다면 이것이 바람직한지 확실하지 않지만 ROUTE_CHANGED 액션 생성자의 부작용으로 또는 별도의 상점 가입자.

BTW, 이 논의가 이 문제의 범위를 벗어나는 경우 알려주시면 이동하겠습니다.

@cappslock 너무 좋아요! ROUTE_CHANGED 를 발송한다고 해서 경로가 바뀌지 않는 것은 확실히 문제가 아니라고 생각합니다. 액션을 트리거가 아닌 이벤트로 처리하는 것이 더 명확하고 이해하기 쉬운 것 같습니다(사용자 상호 작용에 응답하기 때문에 BUTTON_CLICKED 액션이 실제로 버튼 클릭을 트리거할 것으로 기대하지 않을 것입니다). 내가 이해하지 못하는 코드의 한 부분이 있습니다. 이 부분에 대해 자세히 설명해 주시겠습니까?

이것은 첫 번째 경로가 초기 렌더링을 트리거하도록 맨 아래에 배치됩니다.

@elliotdickison 감사합니다! 분명히 말씀드리겠지만 깊이 있는 분석이 아닌 시행착오와 가정을 바탕으로 하는 말씀이니 냉정하게 받아들이시기 바랍니다. 이것은 이 시점에서 개념/스케치의 증명에 가깝습니다.

ReactRouter 의 인스턴스화 위에 해당 코드를 배치했을 때 / 경로에 해당하는 구성 요소는 렌더링되지 않았습니다. 작업이 수동으로 디스패치되거나 상태가 수동으로 푸시된 경우 라우터가 계속 작동하므로 히스토리의 수명 주기 문제라고 생각했습니다. ReactRouter 의 인스턴스화 아래로 이동하면 이 문제가 해결되었습니다. 나는 히스토리 라이브러리가 적어도 한 명의 구독자가 있을 때까지 초기 경로의 알림을 연기한다고 생각합니다. 해당 구독자가 ReactRouter보다 먼저 설정되면 알림이 도달하지 않습니다.

이것을 설명하려고 하면 내 이해가 약간 부족하다는 것을 깨달았습니다. 이에 대해 더 알아보고 더 나은 답변을 드릴 수 있도록 노력하겠습니다.

이 접근 방식의 단점은 ROUTE_CHANGED 작업에 대한 응답으로 URL이 업데이트되지 않는다는 것입니다. 작업을 명령으로 처리하지 않으려는 경우 이것이 바람직한지 확실하지 않지만 ROUTE_CHANGED 작업 생성자의 부작용으로 또는 별도의 스토어 구독자가 완료할 수 있다고 생각합니다.

나는 이것이 바람직하다고 말하고 싶습니다. ROUTE_CHANGED 는 확실히 외부 소스(예: onhashchange...)에 의해 실행되어야 합니다. IMO URL 변경은 그 반대가 아니라 ROUTE_CHANGED 이 되어야 합니다.

동의합니다. 디스패치된 ROUTE_CHANGED 액션이 실제 히스토리 이벤트가 아닌 코드에서 시작된 경우를 대비하여 스토어를 구독하고 URL을 동기화된 상태로 유지하는 것이 좋을 것이라고 생각했지만 그 경우가 다음을 나타낸다고 주장할 수 있습니다. 프로그래밍 오류.

@cappslock 당신의 접근 방식은 정말 정말 좋습니다. 그것에 대해 블로그 포스트를 만들 수 있습니까?

@vojtatranta https://github.com/rackt/redux/issues/805 를 확인하십시오. 구현에 영감을 준 것 같습니다.

@vojtatranta 감사합니다! 나는 블로그가 없기 때문에 거의 모든 정보가 이 스레드와 #805에 있습니다. 특히 더 많은 정보를 원하셨나요?

1.0이 나왔습니다.

다음을 수행할 시간입니다.

• 사용하는 포트 라우팅 예제
• real-world 예제를 기반으로 "라우터 사용" 레시피 추가

:박수:

@gaearon _Usage with Router_ 예제가 PR에 있을 때 이 문제를 참조할 수 있습니까? 내가 아는 많은 사람들(저를 포함하여)은 이 두 가지가 어떻게 함께 잘 작동하는지에 대한 설명을 찾고 있습니다.

물론이지. 문제가 종료되는 시점입니다. :-)

이제 redux-simple-router 를 고려해야 할까요?

redux-simple-router +1

방금 범용 예제 + react-router(+redux-simple-router)를 변환했습니다.
https://github.com/eriknyk/redux-universal-app

안녕 여러분, 이 토론의 결론은 무엇입니까? 나는 문서가 react-router와 함께 사용하도록 업데이트되지 않은 것을 봅니다.
cc @gaearon

@gaearon 내 반응 응용 프로그램을 redux에 바인딩한 후 상태를 사용하여 구성 요소의 표시/숨김을 제어합니다. 그래서 저는 RR과 같은 원래의 "라우터" 역할이 지금 제 애플리케이션에 적합하지 않다고 생각합니다.
"새 라우터"가 해야 할 일은 URL을 상태에 매핑하고(동작을 통해?) 상태를 다시 url에 다시 매핑하는 것뿐이라고 생각합니다.
url이 응용 프로그램 구성 요소(그 중 일부)가 표시되는 방법을 결정하게 하면 상태 소스가 두 개 있습니다. 하나는 url이고 다른 하나는 redux의 저장소이므로 상황이 더 어려워집니다...
이에 대해 뭐라고 합니까? 주소 표시줄을 응용 프로그램 구성 요소의 또 다른 구성 요소로 두어야 합니다.

감사 해요

https://github.com/rackt/react-router-redux/pull/259를 출시한 후 공식적으로 이 문서를 작성할 것을 약속합니다. 이것은 React Router와 Redux를 바인딩하는 축복된 방법이 될 것입니다. 문서에서 먼저 해당 패키지 없이 사용하는 방법을 보여주고 패키지가 제공하는 두 가지 편리함을 점진적으로 소개합니다. 미들웨어와 라우팅 소스를 저장소로 이동하는 것입니다. 둘 다 선택 사항이므로 사용하기로 선택하는 경우와 기본 RR에 대해 제공하는 사항을 확실히 설명하겠습니다.

여기에 고려해야 할 생각이 있습니다. 라우팅 및 기록과 관련된 미들웨어에 대해 설명하는 것이 http://rackt.org/redux/docs/advanced/Middleware.html 의 일반적인 설명 내에서 실제 응용 프로그램의 특정 부분이 될 수 있는 경우( 예를 들어 끝에 있는 예제에서)

@gaearon React Router 문서/다음 단계에 대한 진행 상황이 있습니까? 나는 Redux 문서를 읽고 그것을 사랑하지만 그 가짜 링크에 의해 부끄러워합니다 :(

나는 단지 내 개인 repo에서 react 라우터 문서를 다시 작성하기 시작했고 거기에도 redux 섹션을 가질 계획입니다. 내 자유 시간에 따라 곧 할 일이 있을 수 있습니다. 계속 업데이트하겠습니다. https://github.com/knowbody/react-router-docs

공평하게 반응 라우터가 작동하도록 하기 위해 Redux 측에서 아무 것도 필요하지 않습니다. 하지만 우리는 이것을 해야 합니다.

주의: React Router 3.0은 React Redux connect() 최적화와 더 잘 작동하며 새로운 withRouter() HOC는 컨텍스트를 직접 사용할 필요가 없음을 의미합니다.

https://twitter.com/dan_abramov/status/729768048417251328

@gaearon , @timdorr 라우터 인스턴스를 액션 생성자에 대한 인수로 전달하는 것과 액션 생성자에서 browserHistory를 직접 가져오는 것 사이의 절충점을 명확히 할 수 있습니까(여기에서 제안된 대로 https://github.com/reactjs/react-router/blob /master/docs/guides/NavigatingOutsideOfComponents.md?

router 는 기록 인스턴스를 몇 가지 추가 항목으로 래핑하지만 두 인스턴스 간에 동일한 push 및 replace 메서드입니다.

@timdorr님, 감사합니다.

router 가 기본적으로 히스토리 싱글톤(싱글톤)을 래핑하는 경우 질문이 왜 withRouter() 구성이 필요한가가 되는 것 같습니다.

구성 요소와 기록 인스턴스 간의 느슨한 결합을 허용합니까(즉, 구성 요소가 싱글톤 개체에 직접 액세스하는 것을 방지하기 위해)? 그렇다면 액션 생성자에서 히스토리 인스턴스에 액세스할 때도 동일한 논리가 적용되지 않을까요?

네, 그리고 만약 당신이 당신의 역사 인스턴스를 제공하고 당신 자신의 싱글톤 모듈을 만들고 싶지 않거나 만들 수 없다면(JS 모듈 시스템에 익숙하지 않다면 혼란스러울 수 있습니다). 직접 하고 싶다면 저희 패턴을 따르셔도 좋습니다.

여러 고차 구성 요소에 사용할 수 있는 방법에 대해 withRouter 를 문서화하는 것이 가치가 있는지 잘 모르겠습니다. 나는 여전히 이것을 피하는 가장 좋은 방법을 알아 내려고 노력하고 있습니다.
connect(mapStateToProps, mapDispatchToProps)(withRouter(withAnalytics(withLanguage(TestForm)))); .

compose 와 같은 것을 사용할 수도 있습니까?

const enhance = compose(
  connect(mapStateToProps, mapDispatchToProps),
  withRouter,
  withAnalytics,
  withLanguage
);

export default enhance(TestForm);

그러나 내 사용 사례 컨텍스트에는 로그인한 사용자, 현재 언어, 테마 정보 및 분석이 포함되어 있어 많은 컨텍스트와 연결된 구성 요소가 많아 이를 어렵게 만듭니다.

다른 아이디어는 withRouter 및 connect 논리를 하나의 컨텍스트 네임스페이스 아래에 복제하는 것입니다. withAppContext() => props.app = { user, lang, theme, analytics, router, connect? } ?

이것은 문서나 connect withRouter 사용의 예에 도움이 될까요?

@gaearon React Router 3.0.0과 새로운 Egghead 동영상이 나온 지 얼마 되지 않았고 이 스레드가 열린 지 1년이 된 지금 이에 대한 업데이트가 있습니까?

#1929에서 완료