Redux: 실제 사례(CRUD, 고급 패턴 등 포함)

다음을 처리하는 공식 CRUD 예제를 갖고 싶습니다.

• 입증
• 표준화
• 낙관적 업데이트
• 로컬 편집
• 엔티티 관계
• 쪽수 매기기

이것에 대한 과정을 만들고 싶다면 그것은 놀라운 일입니다. 그러나 예제 자체가 이 리포지토리에 기여하여 유지 관리하고 최신 변경 사항을 최신 상태로 유지하는 것이 중요하다고 생각합니다. 따라서 기존 예제에서 사용하는 빌드 시스템 및 규칙과 일치해야 합니다.

이게 말이 돼?

또한 사람들이 API에서 데이터를 가져오는 위치를 알고 싶습니다.

@gaearon 내용/코드는 오픈 소스이므로 문제 없습니다. 페이지 어딘가에 다시 링크를 요청하면 됩니다.

@sebastiandeutsch 이에 대해 조금 더 자세히

얼마 전 나는 react+redux, monogram 및 eccrypto를 사용하여 비밀번호 관리자를 작성하면서 놀기 시작했습니다. ECIES를 사용하여 암호화되지 않은 형식으로 유선을 통해 전송하지 않고 암호를 저장하고 모두 공유하십시오. 정말 끝내기에는 이르지 못했지만 https://github.com/rackt/redux/issues/1353#issuecomment -178760036의 모든 항목을 아주 잘 만족시킬 수 있습니다. 흥미롭게 들립니까?

@vkarpov15

이것은 매우 흥미롭게 들리지만 너무 도메인에 국한된 것 같습니다. 대부분의 사람들은 일반적인 CRUD 예제(어느 항목이든 연결할 수 있는 편집 가능한 항목 목록 등)를 보고 싶어할 것이며 암호화 초점으로 인해 예제에 접근하기 어려워질 수 있습니다.

저는 낙관적인 업데이트로 로컬/오프라인 편집에 많은 관심이 있습니다. 시간이 있지만 redux 앱에 대한 경험이 많지 않습니다. 복잡한 기본 앱만 가지고 있지만 거의 완전히 로컬/오프라인입니다.
리포지토리를 작성하고 작업하고 점진적으로 논의할 수 있을까요?
또한 "모듈식" 앱은 어떻습니까?
몇 가지 아이디어를 공유하기 위해 저는 오프라인 첫 번째 앱이 어떻게 되어야 한다고 생각하는지에 대한 몇 가지 아이디어를 썼습니다. 시간이 있다면 한 번 사용해 보세요! :)

https://github.com/jsforum/jsforum/issues/7

문제가 얼마나 광범위하고 이 과정의 개발자 목표 수준이 무엇인지 잘 모르겠지만 react+redux에서 구현된 복잡한 앱 구성 요소를 설계하는 방법을 인터넷 어딘가에서 보고 싶습니다(예: 여러 리듀서에 의해 제어되는 상태)이므로 다른 앱에서 전체적으로 재사용할 수 있습니다.

@sompylasar React Redux

초보자 수준의 crud 예제를 찾고 있다면 항상 todo-mvc와 "babel+redux+react+webpack 시작하기" 튜토리얼이 있습니다. 나는 또 다른 것에 많은 가치가 있는지 확신하지 못합니다. 매주 주제에 대한 몇 개의 새로운 블로그 게시물을 읽게 됩니다(하지만 아마도 이러한 튜토리얼을 자동으로 생성하는 앱을 빌드할 수 있을까요? :p ). 저는 중급 수준의 튜토리얼이 더 가치가 있고 IMO에서 암호화에 대해 배우는 것이 매력적인 부수적 이점이 될 수 있다고 주장합니다.

나는 초심자 수준의 예제를 찾고 있지 않지만 CRUD의 복잡한 부분(페이지 매김, 정규화, 낙관적 업데이트, 관계)이 예제의 초점이어야 합니다.

사용자 지정 또는 기존 API를 사용합니까? 아니면 조합?

어려운 질문입니다. 모르겠어요. Github API는 쓰기 가능하고 개념이 모두에게 친숙하기 때문에 좋은 아이디어일 수 있습니다. @ryanflorence가 비슷한 작업을 했다는 것을 알고 있습니다.

확실히 이것을 통해 중급 개발자를 대상으로 합니다. 초심자 tuts는 포화 상태이며 위에 나열된 Dan의 (실제) 더 어려운 주제를 거의 다루지 않습니다.

사용자 지정 및/또는 기존 API 모두에 개방적입니다. aws 계정에서 모든 사용자 지정 API를 호스팅하게 되어 기쁩니다. 우리는 또한 사용할 수 있는 몇 가지 다른 과정을 위해 구축 중인 Medium.com 클론을 위한 완전한 API를 가지고 있습니다. 사람들이 궁금해할 경우 백엔드 소스 코드도 사용할 수 있을 것입니다. 흥미롭게 들리면 세부 정보를 공유하게 되어 기쁩니다.

@EricSimons Medium 클론에 대해 더 알고 싶습니다.

@cshenoy 확실히. React/Redux를 프론트엔드로, Node를 백엔드로 하는 풀스택 JS 과정을 구축하고 있습니다. 백엔드 API는 로컬에서 실행하고 싶지 않은 사람들을 위해 독립적으로 호스팅되므로 위의 보다 복잡한 주제를 가르치는 데 적합할 수 있습니다. Medium 클론의 기능 세트에는 다음이 포함됩니다.

• 인증(이메일/패스 및 oAuth, JWT)
• 블로그 게시물 및 블로그 게시물 댓글용 CRUD
• 팔로잉 사용자
• 모든 블로그의 글로벌 피드 및 팔로우하는 사용자의 블로그 피드
• 태깅 시스템
• 사용자 프로필/프로필 정보 편집

최종 코드베이스의 ETA는 이번 주 말까지이므로 그때쯤에 더 많은 정보를 얻을 수 있습니다. 우리는 모든 것을 슈퍼 모듈식으로 설계했으므로 추가 기능을 추가하는 것은 간단합니다.

작업표(시간 추적기)는 실제로 플럭스/리덕스 및 크루드의 복잡한 측면을 많이 사용합니다. 페이지 매김과 캐싱은 며칠과 몇 주를 왔다갔다 할 때 필요한 명백한 요구 사항입니다. 이미 존재하는 쓰기 가능한 API도 많이 있습니다. 또한 시간 추적 외에도 많은 것이 있습니다. 사용자 관리, 프로젝트 엔터티 등

나는 이것이 좋을 것이라고 생각한다. 나는 특히 그것의 일부를 만드는 데 약간 어려움을 겪었습니다. 예를 들어 다음과 같은 새 기사를 만드는 ArticlePage 구성 요소가 있다고 가정합니다.

// shortened version

import { addArticle } from '../actions'

function doAddArticle(props, handleAdded, values, dispatch) {
  props.addArticle(values)
  .then(handleAdded)
}

class AddArticlePage extends Component {
  handleAdded = () => {
    this.props.pushState(null, '/articles/')
  };

  render() {
    return (
      <div>
        <ArticleForm submit={(values, dispatch) => doAddArticle(this.props, this.handleAdded, values, dispatch)} />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {}
}

export default connect(mapStateToProps, {
  pushState,
  addArticle
})(AddArticlePage)

1. 리디렉션을 수행하기 위해 해결된 약속을 묶는 것이 "올바른" 일인지도 모르겠습니다.
2. 새로 생성된 기사에서 ID를 가져오고 인덱스 페이지로 리디렉션하는 대신 /articles/{id}/ 페이지로 리디렉션하려면 어떻게 합니까?
3. 내 구성 요소가 비동기 작업의 결과를 원하는 경우 어떻게 합니까? 저에게 이것은 이미지 업로드 양식 필드가 있는 ArticleForm 구성 요소 내에 나타났습니다. "addImage" 작업을 전달하고 이미지가 로드되면 1) URL을 기반으로 업로드된 이미지의 미리보기를 표시하고 2) 다음을 수행하고 싶습니다. 양식에 URL을 할당합니다. 그러나 Redux에서 이를 수행하는 가장 좋은 방법이 무엇인지 파악하기가 어려웠습니다. 내가 찾은 문제는 새로 추가된 상태/이미지를 양식 구성 요소의 소품에 매핑할 수 있어야 하지만 1) 새로 추가된 이미지를 얻는 방법과 2) 동시에 업로드되는 2개의 이미지가 있는 경우 어떻게 합니까? 올바른 구성 요소에 대한 올바른 이미지 URL을 얻었습니까?

물론 저는 Redux를 사용한 지 몇 달밖에 안 되었기 때문에 어리석은 문제일 수 있지만 초보자로서 그들은 분명히 저를 넘어뜨렸고 여전히 제 솔루션이 "올바른 방법"이라고 생각하지 않습니다.

@jonathaningram redux-thunk는 전혀 보셨나요? 위에서 수행하는 작업의 대안으로 작업 내에서 파견할 수 있습니다.

@babsonmatt 네 이미 사용하고 있습니다. 나는 그것을 사용하는 실제 사례를 기반으로 앱을 만들었습니다. 어쩌면 나는 그것을 전체 기능으로 사용하지 않을 수도 있습니다.

@jonathaningram 귀하의 모범에 감사드립니다. 지적했듯이 리디렉션 논리를 작업 작성자의 썽크로 이동하고 거기에서 경로 업데이트를 전달해야 합니다. redux-saga 또는 redux-side-effects와 같은 부작용(리디렉션은 해당 작업으로 인한 상태 전환의 부작용)을 관리하는 더 많은 방법이 있습니다. 그러나 심도 있는 논의는 이 문제의 범위를 벗어났다고 생각합니다.

@sompylasar 감사합니다. 네, 이 문제를 우회하고 싶지는 않지만 Redux 초보자로서 "실제 세계" 경험을 공유하고 싶었습니다.

@EricSimons 저는 돕고 싶습니다. 저는 현재 Nuclear-js를 사용하여 CRUD 앱을 유지 관리하고 있으며 많은 아이디어가 redux로 잘 번역될 것이라고 생각합니다. 브레인스토밍을 하고 싶다면 알려주세요.

저는 최근에 CRUD(over REST) ​​상태 관리 프로젝트를 시작했습니다. Marionette/Backbone 부터 React/Redux를 파헤칠 때 REST 규칙이 정말 그리웠습니다.

https://github.com/masylum/resting-ducks

솔루션이 예인지 확실하지 않습니다. 나는 도서관이 그것을 위해 더 잘 작동한다고 생각합니다. 상태 관리는 거의 항상 동일합니다. 2016년에는 CRUD 코드를 작성하지 않고 비즈니스 로직에 집중해야 합니다.

@EricSimons 저는 현재 데이터 요구 사항을 지정하고 데이터를 가져올 때 다양한 옵션을 평가하고 있습니다. 한 가지 옵션은 Relayish를 구현하는 것입니다. 하지만 약간 과하다는 느낌이 듭니다. 내가 프로젝트를 위해 만든 것은 loader 속성을 사용하여 경로에 내 로딩 요구 사항을 지정하는 것입니다.

let routes = <Route path='/' component={Layout}>
  <IndexRoute component={BooksIndex} />
  <Route path='/book/new' component={BooksNew} />
  <Route path='/book/:id' component={BooksShow} loader={BooksLoader} />
  <Route path='/book/:id/edit' component={BooksEdit} loader={BooksLoader} />
</Route>;

BooksLoader는 두 가지 기능을 구현하는 클래스입니다.

• NeedsToSyncStore(params, store)는 저장소를 동기화해야 하는 경우 true를 반환하고 그렇지 않으면 false를 반환합니다.
• syncStore(params, store)는 저장소를 동기화하고 약속을 반환합니다.

다음은 더 똑똑한 것으로 확실히 대체할 수 있는 매우 기본적인 구현 예입니다(예: ImmutableJS / Map):

import _ from 'lodash';
import * as Actions from 'actions';
import API from 'api';

export default class BooksLoader {
  needsToSyncStore(params, store) {
    let books = store.getState().books;

    if(books) {
      const book = _.findWhere(books.collection, { isbn: params.id });
      if(book) {
        return false;
      }
    }

    return true;
  }

  syncStore(params, store) {
    let { dispatch } = store;
    let api = new API();

    let loadBooks = Actions.loadBooks();
    return loadBooks(dispatch, store.getState);
  };
}

아이디어는 로더가 경로와 테스트를 쉽게 하는 redux 상태 트리가 제공하는 상태에만 관심을 갖는다는 것입니다.

다음 조각은 ReactRouter: https://gist.github의 RenderContext로 사용할 수 있는 @ryanflorence AsyncProps(https://github.com/rackt/async-props)에서 크게 영감을 받은 반응 구성 요소인 스토어 로더입니다 . com/sebastiandeutsch/e6148ca0741cc355248c

로더에 대한 ReactRouter의 경로를 확인하고 실행하는 것입니다. 또한 컨텍스트를 통해 로딩 상태를 노출합니다. 실제로는 다음과 같습니다.

<Provider store={store}>
  <Router
    history={browserHistory}
    render={(props) => (
      <StoreLoader {...props} store={store} />
    )}>
      {routes}
    </Router>
</Provider>

경로 구성 요소(라우터의 직접적인 자식인 특수 구성 요소)에서 다음과 같은 컨텍스트를 사용할 수 있습니다.

export class BooksShow extends React.Component {
  static contextTypes = {
    storeIsSynchronized: React.PropTypes.bool
  };
  ...
  render() {
    const { book } = this.props;

    if(this.context.storeIsSynchronized) {
      /* display components */
    } else {
      /* display loading spinner */
    }
}

export default connect(
  (state, props) => {
    return {
      book: _.findWhere(state.books.collection, { isbn: props.params.id } )
    }
  },
  (dispatch) => ({
    actions: bindActionCreators(Actions, dispatch)
  })
)(BooksEdit);

@gaearon 이 아이디어에 대해 어떻게 생각하세요?

@sebastiandeutsch 나는 그 접근 방식을 좋아합니다. 저도 Async-Props로 실험하고 있습니다. 여기에서 당신의 아이디어는 정말 멋져 보입니다.

나는 이 예제가 데이터 가져오기를 위한 추상화를 중심으로 조정되기 보다는 더 일반적이어야 한다고 상상했습니다. Rest API에 대한 저장소 및 작업을 설정하는 쉬운 방법의 기본 예제로 https://github.com/optimizely/nuclear-js/tree/master/examples/rest-api 를 정말 좋아합니다.

캐시를 지원하고 저장소에 진행 중인 요청을 저장하도록 확장했습니다(요청이 다시 발생하면 호출자는 xhr을 다시 시작하는 대신 단순히 지연됩니다. 내가 말하는 것에 대한 보다 강력한 예는 여기에 있습니다. : https://github.com/jordangarcia/nuclear-api-module-example/tree/master/rest_api 그리고 @jordangarcia 의 개념 중 일부를 큰 성공으로 복사했습니다. 여기의 접근 방식이 다음과 잘 작동할 수 있다고 생각합니다. redux도 (normalizr 등과 함께 제공).

@EricSimons 는 주제와 쓰기 가능한 좋은 API를 찾는 데 더 많은 문제가 있습니까? 아니면 특정 접근 방식을 찾고 있습니까?

저는 주로 주제에 관심이 있습니다(최악의 경우 사람들이 사용할 수 있도록 자체 쓰기 가능한 API를 호스팅할 수 있기 때문에). btw 위의 모든 댓글 작성자에게 큰 감사를 드립니다. 이 토론은 지금까지 환상적이었습니다. 이 예에서 다루어야 할 내용에 대한 더 많은 생각/아이디어를 듣고 싶습니다.

참고로 @dan-weaver 및 이 작업에 관심이 있는 다른 사람들 - [email protected] 에 메모를

Meteor 세계에는 Meteor에 대한 책에서 시작된 하나의 큰 오픈 소스 예제 프로젝트가 있습니다. 이 프로젝트는 Reddit 또는 Hacker News와 유사한 웹 애플리케이션인 Telescope 입니다. Redux에 비슷한 예가 있다면 좋을 것입니다. 많은 개발자들이 이 책을 따르고 그것과 함께 더 작은 버전의 Telescope를 구축함으로써 Meteor를 배웠습니다. Telescope와 같은 응용 프로그램은 Dan이 대부분의 개발자에게 이미 친숙한 응용 프로그램에 대해 제기한 모든 주제를 다룹니다(Hacker News, Reddit, .. 때문에).

나는 몇 달 전에 webapp *에서 유사한 애플리케이션의 기초를 만들기 시작했습니다. 이 프로젝트에는 빌드 프로세스, CSS 모듈, 인증, API용 별도 서버, MongoDB, 서버 측 렌더링, GraphQL 등이 이미 설정되어 있습니다(일부는 약간 구식일 수 있고, 더 많은 작업이 필요하거나 완료될 수 있습니다. 더 나은). 또한 다른 예에는 없는 것으로 생각되는 감속기 분할이 있습니다. 부족한 점은 데이터 가져오기, 낙관적 업데이트, 실시간 데이터에 대한 좋은 솔루션이라는 것입니다. 또한 지금 모든 것이 얼마나 빨리 진행되고 있는지에 대해 2 개월이 영원처럼 느껴지기 때문에 약간 구식입니다 :)

코스의 예제를 만들기 위한 출발점을 원한다면 _webapp_이 영감이 될 수 있습니다. Redux에서 Telescope와 유사한 작업을 수행하는 것을 보고 싶습니다.

*_ 노하우 폴더에는 아키텍처/결정에 대한 일부 정보가 포함되어 있습니다._

_Sidenote:_ Redux에 데이터 가져오기에 대한 이야기가 없다는 것을 알았기 때문에 현재 Redux와 통합되는 Relay와 유사한 시스템을 만들고 있습니다. 이것이 제가 2개월 동안 _webapp_을 업데이트하지 않은 이유입니다. 해당 시스템을 만드는 데 성공하면 _webapp_ 계속하겠습니다.

직면한 한 가지 문제는 Redux가 매우 낮은 수준이며 따라서 Redux를 중심으로 애플리케이션을 _실제로_ 빌드하는 방법에 대해 상당히 의견이 없다는 것입니다. 따라서 redux와 최종 사용자 인터페이스 사이에 유효한 추상화가 너무 많기 때문에 학습할 _one_ 예제 코드베이스를 단순히 유지 관리할 수 있는지 확신할 수 없습니다. 이것은 데이터 로드에 대한 많은 다른 가능성이 명확한 승자가 없이 제시되는 이 스레드의 일부 논의에 의해 예시됩니다. 응용 프로그램 규모가 크게 다르기 때문에 올바른 방법 은 없습니다.

이러한 이유로 Dan이 이전에 언급한 모든 고급 기능을 요구하는 사양에 "_The_ Advanced TODOMVC of Redux" 를 제시하는 것이 바람직합니다.

앞으로 나아가면서 이 고급 애플리케이션을 개념 증명으로 사용할 수 있는 더 많은 추상화/라이브러리/프레임워크 _주변_ Redux를 보기 시작할 것이라고 믿습니다. 실제로 시간이 지남에 따라 이것은 Redux와 관련이 없는 것으로 브랜드가 변경될 수 있습니다.

API 측면에서 일종의 표준( JSON-API 는 비정규화 및 관계 설명을 위한 탁월한 기반 제공)을 따르고 궁극적으로 이 앞에 GraphQL 서버가 있는 것을 보고 싶습니다.

이것이 커뮤니티로 어떻게 구성되는지에 관해서는 애플리케이션 사양, 서버 구현 및 모든 현재 구현의 목록/비교 차트를 포함하는 핵심 리포지토리가 있을 수 있다고 생각합니다.

한편으로는 부분적으로 관련되어 있지만 여기 특정 주제에서 언급한 내용을 참고하여 Redux의 범위를 명확히 하는 데 이 문제의 우선순위를 지정하는 것이 좋을 것이라고 생각합니다.

추신. 곧 React London 에서 "Real World Redux" 강연이 열릴 예정

나는 이 작업을 할 준비가 되어 있습니다. 새 사용자에게 할 일 목록이 아닌 사용 가능하고 주석 처리되고 설명된 Redux 애플리케이션을 제공하는 것은 좋은 아이디어라고 생각합니다. 아직 @EricSimons에 대한 작업이 시작되었습니까?

redux 의 상용구를 줄이고 이를 사용하여 실제 세계를 구축하는 방법에 대해 비슷한 질문이 많이 있는 것 같습니다. 나는 내가 여기에 대해 쓴 꽤 좋은 솔루션(무엇보다도)을 찾았다고 생각합니다.

https://medium.com/@timbur/react -automatic-redux-providers-and-replicators-c4e35a39f1

TL; DR : 당신은 만들 수 있습니다 redux 자동으로에 따라 구성 요소에 자신을 일치 제공 propTypes . 정말 필요한 것은 components 디렉토리, providers 디렉토리, 선택 사항이지만 권장되는 themes 디렉토리입니다. 모든 것은 쉽게 교환, 이해, 유지 관리, 확장 및 재사용이 가능합니다. 클라이언트와 서버 모두 핫 리로딩, 서버 렌더링 등과 같은 모든 것에는 훨씬 더 많은 것이 포함되어 있습니다. 저는 오늘 일찍 포함된 상용구를 기반으로 처음부터 앱을 빌드했으며 약 10분이 걸렸습니다. 보통 1시간 걸립니다. :)

얼리 리액트 어답터로서의 경험에 따르면 나는 예제에서 Github API를 사용하지 않을 것입니다.

• "그냥 작동하는" 것을 찾는 사람에게는 인증이 지나치게 복잡합니다.
• 실험에 적합하지 않습니다. API 변형을 수행하는 동안 파괴적이지 않게 하려면 별도/일시적인 Github 계정을 만들어야 합니다.

대신 간단한 사용자 정의 API를 사용하십시오. 우리는 제3자에 의존하고 싶지 않으며 누구나 json-server 에서 내 BottledAPI 예제 (wip)와 같은 자신의 인스턴스를 실행할 수 있도록 합니다.

이것은 또한 Javascript, Java, C#, PHP 등에서 다른 나머지 백엔드 구현을 허용합니다. 이것은 꽤 턴키 방식으로 개발을 시작하는 데 도움이 될 것입니다.

위의 내 의견에 있는 링크 내 BTW에는 블로그 앱을 빌드하는 방법에 대한 세부 정보가 있습니다. 다음 주 내에 사용자 인증과 그 모든 것을 추가할 계획입니다.

안녕 얘들아! 저는 ReactJS를 공부하고 있으며 React + Redux를 사용하여 개인 URL 단축기 버전을 개발했습니다. 내 예제는 프런트엔드 개발을 위해 Gulp + Browserify + Babelify를 사용합니다. 구성 요소 및 작업에 대해 Mocha 및 Enzyme을 사용하여 단위 테스트를 작성했습니다. 이 예에는 다음도 포함됩니다.

• 생성, 읽기 및 업데이트 작업
• Json 웹 토큰으로 인증
• 쪽수 매기기
• 태그
• CORS

인터페이스 및 사용성에 약간의 버그가 있습니다. 하지만 작동합니다 =)
누군가가 실제 사례의 기반으로 사용할 수 있습니다.

데모: https://gustavohenrique.github.io/gh1
출처: https://github.com/gustavohenrique/gh1

이 예제를 개선하는 방법에 대한 제안을 수락합니다. 감사 해요!

파티에 조금 늦었지만 Redux를 기반으로 하는 본격적인 관리 웹 응용 프로그램을 시작했습니다.

우리는 비동기 작업에 redux-thunk 를 사용하고 최상위 리듀서를 필터링하는 것만으로 놀라운 개선(_모바일에서_)을 제공하는 redux-ignore 를 사용합니다.
웹 앱은 100% 반응하므로 모바일에서 사용/테스트하기 쉽습니다.

이전 작업을 "롤백"하여 낙관적인 업데이트를 관리합니다. 영향을 받는 감속기는 이전 상태로 돌아가는 방법을 알고 있으므로 매우 격리되고 효율적입니다.

어쨌든, 여기에 링크가 있습니다 http://www.handy-erp.com/en/
계정을 만들고 스스로를 노크하세요.

@SebastienDaniel 축하합니다! 아름다운 웹사이트입니다. redux 부분을 공개 저장소에 넣었습니까?

@gustavohenrique 감사합니다
불행히도 소스는 공개 리포지토리에 없습니다. 그러나 저는 이 소스를 사용하여 질문을 다루거나 커뮤니티를 돕기 위한 데모를 구축하는 데 매우 개방적입니다.

모듈화의 예를 보고 싶습니다. 엄청난 양의 기능을 가진 앱을 빌드하는 경우 단일 책임 모듈을 빌드하는 방법을 찾고 있습니다. 팀에 더 좋고 유지 관리에 더 좋습니다.

먼저 공유 코드 감사합니다!@gustavohenrique
다른 것들:
사용자 목록이 아닐까? 로그인? 등록하다...
redux에는 이러한 예제가 필요합니다!

@gggin 및 @EricSimons에 동의합니다. 이러한 기능의 완전한 생산 준비 버전은 놀랍습니다.

인증(이메일/패스 및 oAuth, JWT)
블로그 게시물 및 블로그 게시물 댓글용 CRUD
팔로잉 사용자
모든 블로그의 글로벌 피드 및 팔로우하는 사용자의 블로그 피드
태깅 시스템
사용자 프로필/프로필 정보 편집

이 외에도 기본 역할 또는 권한 시스템이 있으면 좋습니다. GitHub의 팀 또는 Trello의 구성원과 동등한 것

헤이 여러분,

저는 지난 몇 주 동안의 경험을 바탕으로 강력한 redux crud api 에 대한 느슨한 제안을 하고 있습니다.

https://github.com/ppiekarczyk/redux-crud-api-middleware/blob/master/README.md

어떤 피드백이든 감사히 받겠습니다. 감사 해요!

저는 지금 만들고 있는 애플리케이션을 오픈 소스 예제 프로젝트로 변환할 의향이 있습니다.

안녕하세요. 예제 코드베이스를 거의 검토할 준비가 되었음을 알려드리게 되어 기쁩니다. 매우 철저하며 이 스레드에서 이야기한 대부분의 실제 사용 사례(인증, CRUD, 페이지 매김 등)를 다룹니다. @vkarpov15 에서 마무리해야 할 몇 가지 작업이 있지만 다음 주 초쯤에 준비될 것입니다.

코드베이스를 검토하는 데 도움이 되었으면 합니다. @gaearon 이 몇 달 전 기꺼이 살펴보고 있으며 여기 커뮤니티의 모든 피드백은 훌륭할 것입니다. 검토 및 반복하는 동안 초기 코드베이스에 이 리포지토리 를 사용하고, 준비가 되면 최종 코드를 공식 redux 리포지토리에 배포합니다. 자유롭게 별표를 표시하거나 시청하고 코드베이스가 온라인 상태이고 검토할 준비가 되면 이 스레드에 업데이트를 게시할 것입니다.

질문에 답변해 드리겠습니다. 훌륭한 토론을 해주신 모든 분들께 감사드립니다!

잘 들린다. 준비가 되면 관련 Redux FAQ 질문에 언급과 링크를 추가하세요.

약속한 대로 코드베이스는 https://github.com/GoThinkster/redux-review 에서 검토할 준비가 되었으며 모든 사람의 피드백을 듣고 싶습니다. 문제 및 홍보를 환영합니다!

여러분, 멋진 토론과 훌륭한 실제 사례를 제시해 주셔서 감사합니다.

이러한 예제 목록에 추가하기 위해 이 예제 https://github.com/andrewngu/sound-redux , 작업 데모가 https://soundredux.io/에 배포된 것을 @gaearon 이 말한 기준에도 부합하는 것 같습니다. 그러나 확실하지 않으므로 누군가 피드백을 줄 수 있다면 도움이 될 것입니다. 자격이 되는 경우 목록에 추가할 수 있습니다. 게다가 지난 1년 반 동안 적극적으로 유지 관리했습니다.

마지막으로 멋진 실제 사례를 제공한 @EricSimons 에게 특별한 감사를 드립니다.

실제로 http://redux.js.org/docs/faq/Miscellaneous.html#miscellaneous -real-projects 에서 여러 실제 React 및 Redux 앱을 가리키는 FAQ 항목을 추가했습니다. (사실 그 Sound-Redux 앱을 본 적이 있는 걸로 아는데, 내 목록에 추가한 것 같지는 않다. 해봐야겠다.)

우리가 할 수 있는 "실제" 앱의 수를 고려할 때 더 이상 더 큰 예제를 Redux 리포지토리에 직접 추가할 즉각적인 필요성이 없어 보인다는 이유로 이 문제를 종료하고 종료하겠습니다. 가리키다. 누군가가 특정 예를 리포지토리에 적극적으로 기여하고 싶은 경우 무언가를 말하면 이를 다시 열 수 있습니다.

그리고 예, 토론과 예에 기여한 모든 분들께 감사드립니다!