리액트 + 플럭스 및 서버 측 렌더링(이형 반응 + 플럭스)

리액트 + 플럭스 및 서버 측 렌더링(이형 반응 + 플럭스)

앱의 초기 상태를 동형 어플리케이션으로 설정하는 일반적인 방법은 무엇입니까?Flux가 없다면 다음과 같이 간단하게 사용할 수 있습니다.

var props = { }; // initial state
var html = React.renderToString(MyComponent(props);

그런 다음 익스프레스 핸들 바를 통해 마크업을 렌더링하고 다음 방법으로 표시합니다.{{{reactMarkup}}.

클라이언트 측에서 초기 상태를 설정하려면 다음과 같이 수행합니다.

if (typeof window !== 'undefined') {
    var props = JSON.parse(document.getElementById('props').innerHTML);
    React.render(MyComponent(props), document.getElementById('reactMarkup'));
}

따라서 기본적으로 서버와 클라이언트의 상태를 두 번 설정합니다. 단, React는 차이점을 비교하고 대부분의 경우 재렌더링으로 인해 성능에 영향을 주지 않습니다.

---

플럭스 아키텍처에 작업 및 저장소가 있을 때 이 원칙은 어떻게 작동합니까?컴포넌트 내에서는 다음을 할 수 있습니다.

getInitialState: function() {
  return AppStore.getAppState();
}

서버에서 AppStore로 초기 상태를 설정하려면 어떻게 해야 합니까?사용하는 경우React.renderToString전달된 속성이 없으면 호출됩니다.AppStore.getAppState()서버에 있는 스토어의 상태를 어떻게 설정해야 할지 아직 잘 모르기 때문에 아무것도 들어 있지 않습니다.

2015년 2월 5일 갱신

저는 아직 Fluxible, Fluxor, Reflux와 같은 서드파티제의 Flux 구현을 사용하지 않는 깨끗한 솔루션을 찾고 있습니다.

2016년 8월 19일 갱신

Redux를 사용합니다.

디스패치와 야후의 관련 라이브러리를 참조해 주세요.

대부분의 플럭스 구현은 싱글톤 스토어드, 디스패처 및 액션을 사용하기 때문에 node.js에서는 동작하지 않습니다.또한 html로 렌더링하여 요구에 응답하기 위해 필요한 "we're done"이라는 개념이 없습니다.

Fetchr 및 router와 같은 Yahoo의 라이브러리는 매우 순수한 형태의 의존성 주입(인수 이름 등에 대한 구문 분석 기능 없음)을 사용함으로써 노드의 이러한 한계를 극복합니다.

대신 다음과 같은 API 함수를 services/todo.js에서 정의합니다.

create: function (req, resource, params, body, config, callback) {

actions/createToDo.js에서 다음과 같은 동작을 수행합니다.

module.exports = function (context, payload, done) {
    var todoStore = context.getStore(TodoStore);
...
context.dispatch('CREATE_TODO_START', newTodo);
...
context.service.create('todo', newTodo, {}, function (err, todo) {

마지막 행은 services/todo.js의 create 함수를 간접적으로 호출합니다.이 경우 간접적으로 다음 중 하나를 의미합니다.

• 서버:
  • 서버에 있을 때 fetchr이 추가 인수를 입력합니다.
  • 그런 다음 콜백을 호출합니다.
• 「」는 다음과 같습니다.
  • fetchr 클라이언트가 http 요구를 하다
  • 서버의 fetchr이 대행 수신합니다.
  • 올바른 인수를 사용하여 서비스 함수를 호출합니다.
  • 응답을 클라이언트의 fetchr로 되돌립니다.
  • 클라이언트측 페치러가 콜백 호출을 처리합니다.

이것은 빙산의 일각일 뿐이다.이것은 어려운 문제를 해결하고 사용 가능한 API를 제공하기 위해 함께 작동하는 매우 정교한 모듈 그룹입니다.동형성은 실제 사용 사례에서 본질적으로 복잡합니다.이것이 많은 플럭스 구현이 서버 측 렌더링을 지원하지 않는 이유입니다.

플럭스를 사용하지 않는 것도 검토할 수 있습니다.모든 애플리케이션에 적합한 것은 아니며, 종종 방해가 됩니다.대부분의 경우 어플리케이션의 일부에 대해서만 필요합니다.프로그램에는 은빛 총알이 없어요!

서버측 플럭스의 가장 큰 문제는 싱글톤이라는 FakeRainBrigand의 말이 맞습니다.Flummox는 싱글톤을 사용하지 않고 전체 플럭스 설정을 재사용 가능한 단일 클래스로 캡슐화할 수 있도록 함으로써 이 문제를 해결합니다.그런 다음 각 요청에 대해 새 인스턴스를 생성하기만 하면 됩니다.React Router와 같은 라우팅 솔루션과 조합하면 완전히 동형 애플리케이션을 만들 수 있습니다.

Flummox를 사용하고 싶지 않아도 소스를 쉽게 찾을 수 있기 때문에 직접 작업을 수행할 수 있습니다.

https://github.com/acdlite/flummox

alt.js와 협력할 의향이 있다면alt.bootstrap ★★★★★★★★★★★★★★★★★」alt.flush(표준)

리액트 서버 측 렌더링이 포함된 노드 js와 alt.js를 플럭스 구현으로 사용하고 있습니다.

다음과 같이 표시됩니다.

var data = {}; // Get the data whatever you want and return it bootstrap ready.

// Reminder - renderToString is synchronised
var app = React.renderToString(
     AppFactory(data)
);

// In this point the react rendering was finished so we can flush the data and reset the stores

alt.flush();

내 앱.jsx에서

/**
 *
 */
componentWillMount: function () {

    // This beauty here is that componentWillMount is run on the server and the client so this is all we need to do. No need for other third-party isomorphic frameworks

    alt.bootstrap(
        JSON.stringify(this.props, null, 3)
    );

}

문제는 "Flux 서버 렌더링"을 검색하면 바로 이 질문에 대답할 수 있으며 React.js communityrackt에서 만든 Redux에 대한 언급이 없다는 것입니다.서버 렌더링이 중요한 이유와 초기 상태를 전송해야 하는 이유에 대한 자세한 내용은 Redx 문서를 참조하십시오.HTML(플럭스가 불충분해지는 부분)과 그 방법에 대해 설명합니다.

언급URL : https://stackoverflow.com/questions/27336882/react-flux-and-server-side-rendering-isomorphic-react-flux