Redux: 최고의 비동기 서버 측 로딩 기술은?

헤이, 고마워!

이상적으로는 매장 자체에서 로딩이 이루어져야 합니다.

Redux는 Stores가 완전히 동기화되도록 합니다. 당신이 설명하는 것은 대신 액션 생성자에서 발생해야 합니다.

기본 썽크 미들웨어로도 가능하다고 _생각_합니다. 액션 생성자는 다음과 같습니다.

export function doSomethingAsync() {
  return (dispatch) => {
    dispatch({ type: SOMETHING_STARTED });

    return requestSomething().then(
      (result) =>  dispatch({ type: SOMETHING_COMPLETED, result }),
      (error) =>  dispatch({ type: SOMETHING_FAILED, error })
    );
  };
}

스토어에서 실제(세부적인) 작업을 처리합니다.

상용구를 제거하기 위해 사용자 정의 미들웨어를 작성하는 것도 가능합니다.

천재! 나는 내가 명백한 것을 간과하고 있다고 생각했다. 나는 _doing_과 _storing_의 분리를 좋아합니다.

이미 완성된 상태이지만 이 라이브러리가 성장하는 것을 지켜보기를 기대합니다. 건배 @gaearon!

다음과 같이 사용자 정의 미들웨어를 작성할 수도 있습니다.

export default function promiseMiddleware() {
  return (next) => (action) => {
    const { promise, ...rest } = action;
    if (!promise) {
      return next(action);
    }

    next({ ...rest, readyState: 'request' );
    return promise.then(
      (result) => next({ ...rest, result, readyState: 'success' }),
      (error) => next({ ...rest, error, readyState: 'failure' })
    );
  };
}

기본값 대신 사용하십시오.

이렇게 하면 다음과 같은 비동기 작업 생성기를 작성할 수 있습니다.

function doSomethingAsync(userId) {
  return {
    type: SOMETHING,
    promise: requestSomething(userId),
    userId
  };
}

그리고 그들이

{ type: SOMETHING, userId: 2, readyState: 'request' }
{ type: SOMETHING, userId: 2, readyState: 'success' }
{ type: SOMETHING, userId: 2, readyState: 'failure' }

오, 그것도 좋군요. 그리고 제가 원래 질문을 할 때 염두에 두었던 것보다 더 많습니다. 상점 내부의 readyState 를 확인하기 위해 if 를 추가하는 대가로 액션 상수의 수를 줄이는 절충안이 마음에 드는지 모르겠습니다. 내가 addtional 가진 선호 할 생각 _SUCCESS 및 _FAILURE 단지 퍼팅 피하기 위해 각 작업의 버전을 if , 안쪽 case .

그래도 고마워.

네, 그것은 전적으로 귀하의 취향에 달려 있습니다. types: { request: ..., success: ..., failure: ... } 를 작업으로 바꾸는 유사한 버전이 있을 수 있습니다. 이것은 라이브러리에 베이킹하는 대신 미들웨어로 만드는 것입니다. 모든 사람은 이러한 항목에 대해 자신만의 취향을 가지고 있습니다.

// Middleware
export default function promiseMiddleware() {
  return (next) => (action) => {
    const { promise, types, ...rest } = action;
    if (!promise) {
      return next(action);
    }

    const [REQUEST, SUCCESS, FAILURE] = types;
    next({ ...rest, type: REQUEST });
    return promise.then(
      (result) => next({ ...rest, result, type: SUCCESS }),
      (error) => next({ ...rest, error, type: FAILURE })
    );
  };
}

// Usage
function doSomethingAsync(userId) {
  return {
    types: [SOMETHING_REQUEST, SOMETHING_SUCCESS, SOMETHING_FAILURE],
    promise: requestSomething(userId),
    userId
  };
}

오, 그 솔루션이 마음에 듭니다. then() 및 dispatch() 대한 추가 호출을 제안한 첫 번째 솔루션과 같이 사용하는 것보다 훨씬 좋습니다. 미들웨어 만세!

어떻게(그리고 ;-) 작동하는지 알려주십시오!
우리는 커스텀 미들웨어를 많이 테스트하지 않았습니다.

} (-1포인트 😀)를 빼먹었지만 매력처럼 작동했습니다! 처음으로.

:+1:

@erikras 서버에서 약속이 해결되기를 기다리면서 구현한 방법이

이것은 단지 의사 코드이므로 아무데나 붙여넣지 마십시오. 하지만 다음과 같이 react-router(누의 API가 redux만큼 빠르게 변경됨)를 사용하고 있습니다.

app.get('/my-app', (req, res) => {
  Router.run(routes, req.path, (error, initialState) => {
    Promise.all(initialState.components
      .filter(component => component.fetchData) // only components with a static fetchData()
      .map(component => {
        // have each component dispatch load actions that return promises
        return component.fetchData(redux.dispatch);
      })) // Promise.all combines all the promises into one
      .then(() => {
        // now fetchData() has been run on every component in my route, and the
        // promises resolved, so we know the redux state is populated
        res.send(generatePage(redux));
      });
  });
});

그게 해결이 되나요?

@ 가장

Slack에서 문제를 인용:

나는 라우트 핸들러를 가지고있다.

 static async routerWillRun({dispatch}) {
   return await dispatch(UserActions.fooBar());
 }

여기서 UserActions.fooBar() 는 다음과 같습니다.

export function fooBar() {
 return dispatch => {
   doAsync().then(() => dispatch({type: FOO_BAR}));
 };
}

그런 다음 서버 렌더링에서 다음을 산출하고 있습니다.

 yield myHandler.routerWillRun({dispatch: redux.dispatch});

하지만 작동하지 않습니다.

여기서 문제는 fooBar 의 중첩 메서드에서 실제로 아무 것도 반환하지 않는다는 것입니다.

중괄호를 제거하거나:

export function fooBar() {
  return dispatch =>
    doAsync().then(() => dispatch({type: FOO_BAR}));
}

또는 명시적인 return 문을 추가합니다.

export function fooBar() {
  return dispatch => {
    return doAsync().then(() => dispatch({type: FOO_BAR}));
  };
}

어느 쪽이든 위에서 제안한 것처럼 사용자 지정 promise 미들웨어를 사용하는 것이 더 쉬울 수 있습니다.

@erikras initialState.components (Router.run의 콜백에서)로 가지고 있는 것에 대해 fetchData 메서드를 호출하는 마지막 의견과 관련하여 구성 요소 참조를 가져오는 개체는 일치하는 경로 핸들러만 반환합니다. 일치하는 경로 핸들러가 아닐 수 있는 구성 요소, 즉 하위 구성 요소에 도달하는 것에 대한 귀하의 생각은 무엇입니까? 하지만 데이터를 가져와야 합니까?

여기 내가 말하는 것의 예가 있습니다

import React from 'react';
import Router from 'react-router';
import {Route, RouteHandler, DefaultRoute} from 'react-router';

//imagine Bar needs some data
const Bar = React.createClass({
  render(){
    return(
      <div>bar</div>);
  }
});

const Foo = React.createClass({
  render(){
    return (
      <div>
        foo
        <Bar/>
      </div>);
  }
});


const App = React.createClass({
  render(){
    return (
      <div>
        <RouteHandler />
      </div>
    );
  }
});

const routes = (
  <Route path="/" handler={App} name="App">
    <DefaultRoute handler={Foo} name="Foo"/>
  </Route>
);

Router.run(routes,'/',function(Root,state){
  console.log(state);
});

산출:

{ path: '/',
  action: null,
  pathname: '/',
  routes: 
   [ { name: 'App',
       path: '/',
       paramNames: [],
       ignoreScrollBehavior: false,
       isDefault: false,
       isNotFound: false,
       onEnter: undefined,
       onLeave: undefined,
       handler: [Object],
       defaultRoute: [Object],
       childRoutes: [Object] },
     { name: 'Foo',
       path: '/',
       paramNames: [],
       ignoreScrollBehavior: false,
       isDefault: true,
       isNotFound: false,
       onEnter: undefined,
       onLeave: undefined,
       handler: [Object] } ],
  params: {},
  query: {} }

루트의 바에 액세스할 수 없습니다.

@erikras 환상적입니다! 내가 가고 싶은 길은 바로 그런 길이다. 공유해 주셔서 감사합니다.

@iest 일치하는 경로를 반복하여 말장난이 의도적 인 "경로를 따라 이동"하기를 바랍니다. :-)

@mattybow 사실입니다. 로드하기 위해 경로에 없는 구성 요소가 _정말_ 필요한 경우 유일한 옵션은 React.renderToString() 한 번 실행하고(결과 무시) componentWillMount() 에서 모든 로드를 수행하고 어떻게든 약속을 저장하십시오. 이것은 react-router 서버 측 렌더링을 지원하기 전에 자체 개발한 라우팅 솔루션으로 수행한 작업입니다. 로드를 수행하기 위해 비경로 구성 요소가 필요한 것은 설계 문제의 증상일 수 있다고 제안합니다. 대부분의 사용 사례에서 경로는 구성 요소에 필요한 데이터를 알고 있습니다.

@erikras
솔루션에 대한 전체 예제를 볼 수 있는 공개 리포지토리가 있습니까?

@transedward 그랬으면 좋겠지만 여기에서 자세히 설명하는 방법을 사용하는 지금까지 내 물건은 여전히 ​​매우 미숙합니다. 죄송합니다.

고급 동형 예제에서 +1
나는 이것이 어디로 가고 있는지 좋아합니다!

@transedward 여기에 내가 함께 만든 모든 최첨단 기술이 포함된 샘플 프로젝트가 있습니다. https://github.com/erikras/react-redux-universal-hot-example/

@erikras 굉장합니다! 이 README 및 React Hot Loader 문서의 "스타터 키트" 섹션에 추가하기 위해 PR을 제출할 수 있습니까?

감사 해요! PR이 제출되었습니다.

@erikras 그레이트 - 감사합니다!

이 대화의 일부 아이디어를 기반으로 약속을 처리하는 미들웨어를 만들었습니다. https://github.com/pburtchaell/redux-promise-middleware.

@pburtchaell뿐만 아니라 @acdlite하여이 라이브러리가있다. https://github.com/acdlite/redux-promise

이에 대한 두 가지 생각:

1. 액션으로 변환되는 프라미스는 액션과 함께 전달되어 Redux Store에 저장될 수 있습니다.

그런 다음 페이지를 렌더링할 준비가 되었는지 확인하려면 모든 약속이 완료되었는지 확인하기만 하면 됩니다. 전달되는 모든 약속을 함께 연결하고 보류 중인 약속이 없을 때를 위한 약속을 제공하는 미들웨어를 사용할 수 있습니다.

1. 선택자가 누락된 데이터에 대한 작업을 호출하도록 하는 것은 어떻습니까?

메시지 3을 렌더링하고 싶다고 가정하면 메시지 컨테이너는 <Message id={3}> 렌더링하고 메시지 선택기는 state.msgs[3] 가 있는지 확인하고 없으면 메시지 로딩 약속을 전달합니다.

따라서 두 가지를 결합하면 구성 요소가 필요한 데이터를 자동 선택하고 완료 시점을 알 수 있습니다.

저는 "직렬화할 수 없는 것을 스토어나 액션에 넣지 마십시오"라고 확신합니다. 그것은 저에게 정말 잘 작동하는 불변 중 하나이며(예를 들어 시간 여행이 허용됨) 변경을 고려할 _매우_ 강력한 이유가 필요합니다.

그런 다음 페이지를 렌더링할 준비가 되었는지 확인하려면 모든 약속이 완료되었는지 확인하기만 하면 됩니다. 전달되는 모든 약속을 함께 연결하고 보류 중인 약속이 없을 때를 위한 약속을 제공하는 미들웨어를 사용할 수 있습니다.

이것은 실제로 결국 상점에 약속을 할 필요가 없으며 이것이 마음에 듭니다. 차이점은 디스패치 체인의 끝에서 원시 작업에는 약속이 포함되어 있지 않다는 것입니다. 대신 해당 미들웨어에 의해 "수집"됩니다.

내가 프라미스로 작업할 때 자주 하는 한 가지는 프라미스에 대한 참조를 유지하여 동일한 것에 대한 다른 요청이 들어올 때 단순히 동일한 프라미스를 반환하여 디바운싱을 제공하는 것입니다. 그런 다음 약속이 완료된 후 얼마 후 참조를 삭제하여 구성 가능한 캐싱을 제공합니다.

Redux에서 이러한 참조로 무엇을 해야 할지 궁금하기 때문에 실제 앱에서 Redux를 사용하기 시작해야 합니다. actionCreator를 stateless로 만들기 위해(또는 최소한 상태를 명시적으로 만들기) 스토어에 집어넣고 싶습니다. 작업을 통해 약속을 전달하는 것은 내보내는 좋은 방법이지만 나중에 어떻게든 다시 가져와야 합니다. 흠.

@wmertens 의 마지막 요점에 대한 답변이 정말 기대됩니다.
여러 개의 동시 호출을 피하는 것(대기 중인 경우 아무 것도 하지 않음)은 자주 사용하는 경우이며 이에 대한 최선의 방법이 무엇인지 확신할 수 없습니다(actionCreator에서 저장소의 상태에 액세스할 수 없기 때문에).

actionCreator 사용자(구성 요소)가 해당 작업을 전달할 수 있는지 여부를 상태에서 매번 확인해야 합니까? 그럴 때마다 해야 합니다. 이 작업을 래핑하는 고유한 @connect 주석을 도입해야 할 수도 있습니다.

actionCreator에서 스토어 상태에 액세스할 수 없기 때문에

왜요? 썽크 미들웨어 를 사용하면 잘 할 수 있습니다.

function doSomething() {
  return { type: 'SOMETHING' };
}

function maybeDoSomething() {
  return function (dispatch, getState) {
    if (getState().isFetching) {
      return;
    }

    dispatch(doSomething());
  };
}

store.dispatch(maybeDoSomething());

그것은 그것을 해결합니다!
나는 (이유 없이) actionCreator에서 상태에 접근하는 것은 나쁜 습관이라고 생각했습니다^^ 액션 생성자 호출자가 상태에 접근할 수 있기 때문에 actionCreator가 접근하지 않아야 하는 이유를 모르겠습니다. :)

@gaearon 감사

@gaearon 은 http://gaearon.github.io/redux/docs/api/applyMiddleware.html 위의 답변보다 선호됩니다.

다음과 같이 사용자 정의 미들웨어를 작성할 수도 있습니다.

export default function promiseMiddleware() {
  return (next) => (action) => {
    const { promise, ...rest } = action;
    if (!promise) {
      return next(action);
    }

    next({ ...rest, readyState: 'request' );
    return promise.then(
      (result) => next({ ...rest, result, readyState: 'success' }),
      (error) => next({ ...rest, error, readyState: 'failure' })
    );
  };
}

기본값 대신 사용하십시오.
이렇게 하면 다음과 같은 비동기 작업 생성기를 작성할 수 있습니다.

function doSomethingAsync(userId) {
  return {
    type: SOMETHING,
    promise: requestSomething(userId),
    userId
  };
}

그리고 그들이

{ type: SOMETHING, userId: 2, readyState: 'request' }
{ type: SOMETHING, userId: 2, readyState: 'success' }
{ type: SOMETHING, userId: 2, readyState: 'failure' }

또한,

나는 마지막 부분에 대해 다음을 의미했다고 생각합니다.

{ type: SOMETHING, userId: 2, readyState: 'request' }
{ type: SOMETHING, userId: 2, result, readyState: 'success' }
{ type: SOMETHING, userId: 2, error, readyState: 'failure' }

자동 생성을 사용하는 대신 success 또는 failure 약속의 콜백에 대해 별도의 작업을 생성하려는지 여부에 달려 있다고 생각합니다.

귀하의 썽크 예에서 :

function makeASandwichWithSecretSauce(forPerson) {

  // Invert control!
  // Return a function that accepts `dispatch` so we can dispatch later.
  // Thunk middleware knows how to turn thunk async actions into actions.

  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

소스를 가져오는 데 다른 상황이 있을 수 있으므로 비밀 소스 가져오기 실패에 대해 일반 오류 콜백을 사용하는 것이 반드시 의미가 있는 것은 아닙니다.

따라서 썽크 모델을 좀 더 유연하게 볼 수 있습니다.

로깅 또는 "비동기 진행 중 표시기"의 토글과 같은 것이 미들웨어의 더 적절한 예일 수 있습니까?

@justin808

둘 다 괜찮습니다. 귀하에게 덜 장황한 것과 귀하의 프로젝트에 더 효과적인 것을 선택하십시오. 내 제안은 썽크를 사용하여 시작하고 일부 패턴이 반복되는 경우 사용자 지정 미들웨어로 추출하는 것입니다. 당신은 또한 그들을 혼합 할 수 있습니다.

트리거된 작업(로드, 성공, 실패)의 상태를 다른 상태와 분리하기 위해 ActionStore를 만들었습니다. 그러나 이것이 Redux/Flux의 기반에 위배되는지는 모르겠습니다. 나는 이것에 대해 stackoverflow 에 게시했습니다.

@gabrielgiussi 내 생각에는 https://github.com/acdlite/redux-promise 또한 상태에 약속을 저장하지 않고도 원하는 것을 달성할 수 있다고 생각합니다. 상태는 항상 직렬화 가능해야 합니다.

@wmertens 조언 감사합니다. repo를 살펴보겠지만 내 상태가 직렬화되지 않는 이유는 무엇입니까? 아니면 참고용으로만 말씀하시는건가요?

@gabrielgiussi 자세히 보지는 않았지만 당신이 있는 것 같았습니다
상점에 약속이나 기능을 넣습니다. 어쨌든 그 프로젝트는
또한 잘 작동해야 한다고 생각합니다.

2015년 8월 10일 월요일 19시 15분에 gabrielgiussi [email protected]에서 다음과 같이 썼습니다.

@wmertens https://github.com/wmertens 조언 감사합니다. 그럴 게요
repo를 살펴보지만 내 상태가 직렬화되지 않는 이유는 무엇입니까? 아니면 당신
참고만 하라고?

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/gaearon/redux/issues/99#issuecomment -129531103.

워트.
(모바일로 타이핑, 간결한 변명)

사실, 스토어에서 커스텀 Action 객체를 넣었는데, 그것들은 단지 Immutable.Record에 단순한 속성(id, state, payload)과 Promise를 생성하고 반환하는 액션 트리거가 있는 레코드이므로 스토어에 Promise를 두지 않습니다. 하지만 아마도 다른 곳에서 무언가를 깨고 있는 것 같습니다. @wmertens 감사합니다.

@gabrielgiussi

Promise를 생성하고 반환하는 액션 트리거

직렬화할 수 없는 함수나 다른 것을 상태에 넣지 마십시오.

죄송합니다. 나는 말하려고 노력했다

Promise를 생성하고 반환하는 함수 트리거

내가 실제로 상점에 넣는 것은 Action 객체입니다(이름이 최고가 아니었습니다).

export default class Action extends Immutable.Record({state: 'idle', api: null, type: null, payload: null, id: null}){
load(){
  return this.set('state','loading');
}

succeed(){
  return this.set('state','succeeded');
}

fail(){
  return this.set('state','failed');
}

ended(){
  return this.get('state') != 'loading' && this.get('state') != 'idle';
}

endedWithSuccess(){
  return this.get('state') == 'succeeded';
}

endedWithFailure(){
  return this.get('state') == 'failed';
}

trigger() {
  return (dispatch) => {
    dispatch({type: this.get('type') + '_START', action: this});
    let payload = this.get('payload');
    this.get('api').call({dispatch,payload}).then((result) => {
      dispatch({type: this.get('type') + '_SUCCESS',id: this.get('id'), result: result.result});
    }).catch((result) => {
        dispatch({type: this.get('type') + '_FAIL',id: this.get('id'), result: result.result});
      });
  }
}
}

이 문제를 해결하기 위한 라이브러리를 만들었습니다(#539 참조). 미들웨어가 보류 중인 작업에 대한 약속을 반환하고 모든 약속이 해결될 때까지 기다리면 작동합니다.

@gaearon 당신이 작성한 이 코드는 https://github.com/rackt/redux/issues/99#issuecomment -112212639,

이것은 redux 라이브러리에 포함된 것입니까 아니면 수동으로 만들어야 하는 것입니까? 이것이 새로운 질문이라면 죄송합니다. React / Flux(Redux)에 대해 알아보십시오. 이 튜토리얼을 시작했습니다. https://github.com/happypoulp/redux-tutorial

@banderson5144

포함되어 있지 않습니다. 그것은 단지 당신이 무엇을 할 수 있는지에 대한 아이디어를 제공하기 위한 것입니다. 그러나 당신은 그것을 다르게 할 자유가 있습니다.
비슷한 것이 https://github.com/pburtchaell/redux-promise-middleware 로 게시되었습니다

이 유용한 정보를 주셔서 감사합니다. 나는 상점 재설정에 대한 당신의 두뇌를 선택하고 싶었습니다 -

• 새 사용자의 스토어 상태를 재설정합니다.
• 사용자에게 스토어와 html을 제공하기 전에 일부 비동기 작업이 완료될 때까지 기다립니다.
• 다른 사용자에 대해 이전에 실행 중인 비동기 작업이 완료되고 상점이 오염됨

어떻게 해결하셨나요?/어떻게 아이디어가 있으신가요? 각 사용자를 위한 새로운 상점이 대신 작동할까요?

서버 렌더링을 말씀하시는 건가요? 모든 요청에 ​​대해 새 저장소를 만듭니다. 문서에 서버 렌더링에 대한 가이드가 있습니다.

감사합니다 그렇게 하겠습니다

이해하려고 노력한 후 ...

• https://github.com/ForbesLindesay/redux-wait
• https://github.com/erikras/react-redux-universal-hot-example/

너무 순진한가요? (아무도 이렇게 하지 않는 것 같습니다. 제 생각에는)

// server.js
app.use(function (req, res) {
    match({…}, function (error, redirectLocation, renderProps) {
        …

        if (renderProps) {
            const store = configureStore();

            const promises = renderProps.components.map(function (component, index) {
                if (typeof component.fetchData !== 'function') {
                    return false;
                }

                return component.fetchData(store.dispatch);
            });

            Promise.all(promises).then(function () {
                res.status(200).send(getMarkup(store, renderProps));
            });
        }
    })
});

// home.js
export class Home extends Component {
    static fetchData() {
        return Promise.all([
            dispatch(asyncAction);
        ]);
    },

    componentDidMount() {
        const { dispatch } = this.props;

        Home.fetchData(dispatch);
    }
}

export default connect()(Home);

// action.js
export function asyncAction() {
    return (dispatch, getState) => {
        dispatch(request);

        return fetch(…)
            .then(response => response.json())
            .then(data => dispatch(requestSuccess(data)))
        ;
    }
}

나는 또한 @mattybow 의 질문 https://github.com/rackt/redux/issues/99#issuecomment -112980776(데이터 가져오기를 관리하는 중첩 구성 요소)에 대한 솔루션을 찾으려고 노력했지만 그러한 성공은 없었습니다(그렇지 않았습니다). componentWillMount 에서 약속을 수집하는 방법에 대해 확신합니다.

@chemoish 나는 또한 반응 및 redux를 사용하여 서버 측 렌더링에 대해 머리를 쓰려고 노력하고 있습니다. 문서의 예제는 이 사용 사례를 잘 다루지 않습니다. 서버의 모든 API 요청을 다시 지정하고 구성 요소와 연결하고 싶지 않습니다. 구성 요소는 필요한 데이터를 가져오는 방법만 지정해야 합니다(그런 다음 서버에서 선택해야 함).

귀하의 솔루션은 이를 달성하기에 아주 좋아 보입니다. 이것이 당신을 위해 일했습니까? 감사 해요

편집: "componentDidMount"가 서버에서 렌더링될 때 클라이언트에서 다시 트리거되지 않는다는 것이 맞습니까?

@ms88privat 아직 솔루션에 대한 피드백을 많이 받지 못했고 한계를 테스트하지도 않았습니다.

그러나 위에 제시된 솔루션은 각 페이지가 모든 하위 구성 요소에 대한 데이터를 알아야 합니다. 중첩된 구성 요소가 데이터 관리 자체에 대해 걱정하는 것에 대해 더 깊이 파고 들지 않았습니다(중첩된 약속 수집으로 인해).

당신이 기대하는 대로 하고 있는 것 같으니, 지금으로서는 그것으로 충분합니다.

componentDidMount 가 다시 트리거됩니다(https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount 참조). 이 방법 또는 필요에 맞는 다른 수명 주기 방법을 사용할 수 있습니다.

상점이 이미 가득 찬 경우(또는 적합한 비즈니스 로직이 무엇이든) fetch 코드가 실행되지 않도록 하여 이 문제를 해결합니다.

내가 말하는 내용에 대한 아이디어는 https://github.com/reactjs/redux/blob/master/examples/async/actions/index.js#L47 을 살펴보십시오.

@chemoish

상점이 이미 가득 찬 경우 가져오기 코드가 실행되는 것을 방지하여 이 문제를 해결합니다.

알겠습니다. 감사 해요.

그러나 위에 제시된 솔루션은 각 페이지가 모든 하위 구성 요소에 대한 데이터를 알아야 합니다.

어쩌면 내가 당신의 솔루션을 잘못 읽었을 수도 있지만 이것은 서버 측 렌더링에 관계없이 필요한 요구 사항이 아닙니까? (예: SPA인 경우에도 현재 경로에서 새로 고침하면 동일한 상태를 렌더링해야 함)

그럴 수도 있지만 어떤 이유로든 중첩된 구성 요소가 자체 데이터 가져오기를 관리하기를 원할 수 있습니다.

예를 들어 여러 페이지에서 반복되는 구성 요소이지만 각 페이지에는 많은 데이터 가져오기가 필요하지 않습니다.

@chemoish 같은 페이지에 있는지 잘 모르겠습니다. 제 관점이 무엇인지 설명하려고 합니다.

예를 들어 세 개의 중첩 구성 요소가 있습니다.

• component1(정적 dataFetch1)
  
  
  
  • component2(정적 dataFetch2)
  
  
  • component3(정적 dataFetch3)
  
  

그들 각각은 고유한 dataFetching 선언(정적 dataFetching 메소드를 통한 디스패칭 작업)과 함께 고유한 "componentDidMount" 메소드를 가지고 있습니다.

내가 단절 측 렌더링을하지 않아도 내가 현재 URL을 새로 고치면 내 구성 요소를 탑재하고 이후에 필요한 모든 데이터를로드하는 데 필요한 모든 조치를 트리거합니다.

서버 측 렌더링을 사용하면 match 함수와 renderProps 가 세 가지 구성 요소를 모두 추출하므로 모든 정적 dataFetching 메서드에 액세스할 수 있습니다. 그러면 필요한 모든 데이터를 가져올 수 있습니다. 초기 서버 측 렌더링?

제공된 예에서 match function 대한 참조가 있습니까? 고마워.

@ms88privat renderProps.components 는 라우터 구성 요소의 배열이며, 그 이상은 되지 않습니다. @chemoish 는 그의 구현으로 더 깊은 구성 요소에 대한 데이터 가져오기 요구 사항을 설명할 수 없음을 의미했습니다.

@DominicTobias thx, 이 문제에 대한 해결책이 있습니까? 모든 중첩 구성 요소를 가져올 가능성이 있습니까?

아마도 이것이 도움이 될 수 있습니까? https://github.com/gaearon/react-side-effect
중첩 요소에서 모든 메타 태그를 수집하는 데 사용: https://github.com/nfl/react-helmet

이 토론을 다시 시작해서 죄송하지만 최근에 비동기 작업으로 상태를 미리 채우는 동일한 문제에 부딪쳤습니다.

@erikras가 상용구 프로젝트를 redux-async-connect 로 옮겼음을 알 수 있습니다 . 누군가 다른 해결책을 찾았는지 궁금합니다.

@vtambourine 저는 https://github.com/markdalgleish/redial 을 보고 있었습니다. 꽤 도움이 됩니다.

예, 살펴보았습니다. 하지만 데이터를 확인하는 방법을 알지 못했습니다.
후크 가져오기는 코드를 n으로 재초기화한 후 두 번째로 실행되지 않습니다.
고객.
On Пт, 18 марта 2016 г. 22:54에서 Sean Matheson [email protected]
썼다:

@vtambourine https://github.com/vtambourine 내가 보고 있던
꽤 도움이 되는 https://github.com/markdalgleish/redial

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/reactjs/redux/issues/99#issuecomment -198517067

또한 누군가가 이 문제에 대한 안정적인 솔루션을 찾았는지 궁금합니다. @erikras 의 상용구를 좋아하지만 @vtambourine이 언급했듯이 안정적인 장기 솔루션이 아닌 것처럼 보이는 redux-async-connect로 이동했습니다. #81 redux-async-connect가 죽었습니까? .

@vtambourine https://github.com/makeomatic/redux-connect 에서 사용할 수 있는 포크가 있으며 잘 관리되어 있습니다. 약간의 변경 사항이 있는 유사한 API가 있습니다. 관심 있는 경우 확인하십시오.

@gaearon이 언급한 미들웨어가 있는 redux 솔루션에 관심이 있는 사람들을 위해 이 기술을 구현하고 구성 요소 자체가 서버 측에서 필요한 데이터를 요청할 수 있도록 하는 예제 프로젝트가 있습니다.

https://github.com/peter-mouland/react-lego-2016#redux -with-promise-middleware

이 접근 방식으로 작업 생성자를 단위 테스트하는 방법은 무엇입니까?