redux로 살아난다는 것은 그저 복음일 뿐이지 너무 심플하고 우아하다 대찬양! ! !

btw 오늘 트위터에 외국인이 올린거 우연히 봤는데 외국인이 쓴글인줄알았는데 알리페이 동급생일줄은 몰랐네 👍

효과 확대 기대

Alipay 프로덕션 환경에서 이 아키텍처를 사용하고 있습니까?

@besteric dva 가 막 나왔고 아직 적용되지 않았지만 그 뒤에 있는 애플리케이션 아키텍처 가 한동안 사용되었습니다.

감속기는 다음과 같이 작성할 수 있습니다.

const reducer = (state, { type, payload }) => {
  switch (type) {
    case 'products/query':
      return { ...state, loading: true, };
    case 'products/query/success':
      return { ...state, loading: false, list: payload };
    default
      return state;
  }
}

app.model({
  reducer
})

이것은 감속기에 몇 가지 고차 방법을 적용하는 것을 가능하게 합니다.

찬양해, 내가 몇 가지 데모를 작성했고 단 하나의 문제가 있습니다. 모델만 사용할 수 있습니다
app.model(Model1); app.model(Model2);
조합을 완성하는 이 방법은 사실 제 생각에 이상적인 것은
app.model([Model1,Model2])
어떤 종류의

컴포넌트 간에 디스패치를 ​​전달하는 것은 너무 번거롭습니다. 다음 솔루션을 고려하십시오.

bindActionCreators 를 사용하지 않습니까?

@yesmeck 감속기의 고급 사용에 대한 구체적인 시나리오는 redo/undo 만입니까?dva가 너무 유연하지 않기를 원하며 향후 애드온을 통해 추가하는 것을 고려할 것입니다.

우리는 프로젝트에서 많이 사용합니다.예를 들어 우리는 원래 리듀서를 수정하기 위해 여러 리듀서의 유사한 부분을 높은 수준의 방법으로 추출하고 경로가 변경될 때 리듀서가 상태를 재설정할 수 있도록 하는 높은 수준의 메서드가 있습니다. 변경 사항. , 이 https://github.com/erikras/multireducer

@Tinker404 따로 모델을 선언하는게 더 명확하고 추가와 삭제가 더 쉬울 것 같아요. 나는 이것을 쓸 것입니다 :

app.model(require('../models/a'));
app.model(require('../models/b'));

@JimmyLv 는 개인적으로 actionCreator를 사용하지 않고 dispatch 만 사용하는 것을 선호합니다.

@yesmeck ok, 다시 생각하겠습니다.

경로가 변경될 때 감속기가 상태를 재설정하도록 하는 고차 메서드도 있습니다.

subscriptions 의 라우팅 변경 사항을 구독한 다음 조치를 통해 상태를 재설정하면 이 시나리오가 더 적절하다고 생각합니다. 아니면 리듀서 인핸서 방식을 사용하면 어떤 이점이 있습니까?

이 시나리오는 구독에서 라우팅 변경 사항을 구독한 다음 조치를 통해 상태를 재설정하는 것이 더 적절하다고 생각합니다.

이 경우 리셋이 필요한 각 리듀서는 리셋 로직을 작성해야 하며, 하이 레벨 방법을 사용한다면 지금만 하면 됩니다.

combineReducers({
  products: composeReducers({  // composeReducers 的实现见下面
    recycle(LOCATION_CHANGE, initialState),  // recycle 用来在路由变化时重置状态
    products
  })
})

또 다른 시나리오는 다른 리듀서를 추출하는 것과 동일한 논리입니다. 예를 들어 제품 목록과 사용자 목록이 있으며 해당 리듀서는 다음과 같습니다.

// reducers/products.js
const reducer = (state, { type, action}) => {
  switch (type) {
    case 'products/FETCH_SUCCESS':
      return {
        ...state,
        loading: false,
        list: payload
      }
    default:
      return state
  }
}

// reducers/users.js
const reducer = (state, { type, payload}) => {
  switch (type) {
    case 'users/FETCH_SUCCESS':
      return {
        ...state,
        loading: false,
        list: payload
      }
    default:
      return state
  }
}

여기서 두 개의 리듀서는 거의 동일하므로 이를 추출하고 목록 리듀서를 작성합니다.

const list = (actionType) => {
  return (state, { type, payload }) => {
    switch (type) {
      case actionType:
        return {
          ...state,
          loading: false,
          list: payload
        }
        break;
      default:
        return state
    }
  }
}

그런 다음 composeReducers 를 구현하여 다음 3개의 감속기를 결합합니다.

function composeReducers(...reducers) {
  return (state, action) => {
    if (reducers.length === 0) {
      return state
    }

    const last = reducers[reducers.length - 1]
    const rest = reducers.slice(0, -1)

    return rest.reduceRight((enhanced, reducer) => reducer(enhanced, action), last(state, action))
  }
}

이러한 방식으로 제품 목록 및 사용자 목록에 대한 감속기는 다음과 같이 됩니다.

// reducers/products.js
const reducer = (state, { type, payload}) => {
  // 其他逻辑
}

export default composeReducer(reducer, list('products/FETCH_SUCCESS'))

// reducers/users.js
const reducer = (state, { type, payload}) => {
  // 其他逻辑
}

export default composeReducer(reducer, list('users/FETCH_SUCCESS'))

목록은 단지 예일 뿐입니다. 사실 프로젝트에는 동일한 논리를 가진 많은 감속기가 있습니다.

@yesmeck 👍, 감속기 인핸서의 역할은 이전에 과소 평가되었습니다.

@sorrycc 이유를 말해줄 수 있니? dispatch 비교와 함께 명시적으로 호출되었습니까?

@Tinker404 따로 모델을 선언하는게 더 명확하고 추가와 삭제가 더 쉬울 것 같아요. 나는 이것을 쓸 것입니다 :
app.model(require('../models/a'));
app.model(require('../models/b'));

또한 한번에 여러 모델을 전달할 수 있는 방법을 제안합니다. 큰 프로젝트에는 많은 모델이 있을 수 있습니다. 지금은 모든 모델을 요구(가져오기)한 다음 각 모델을 하나씩 모델링하는 것이 매우 편리하지 않습니다. 쓰기의:

// models是个文件夹，有很多model
import models from './models';

models.forEach((m)=>{
    app.model(m);
});

// models.js
const context = require.context('./', false, /\.js$/);
const keys = context.keys().filter(item => item !== './index.js');
const models = [];
for (let i = 0; i < keys.length; i++) {
  models.push(context(keys[i]));
}
export default models;

매우 D.VA입니다.

user-dashboard에서 antd form component를 사용하는 것을 발견했는데 순수 component는 사용할 수 없는 걸로 기억하는데 지금 가능한가요?

@codering 제한 사항이 있는지 기억나지 않습니다. antd 관련 문제는 https://github.com/ant-design/ant-design/issues 에서 질문할 수 있습니다.

https://github.com/react-component/form/blob/master/README.md
주석에 나와 있습니다.

안녕하세요, dva를 사용하고 싶습니다. 현재 React Webpack Redux 스캐폴딩으로 생성된 디렉토리 구조를 사용하고 있습니다. 귀하의 예제에서 user-dashboard 예제를 참조하여 코드를 변경했지만 시작 후 아무 것도 없습니다. 도와주실 수 있습니까? 어디 있는지 알아내요?뭔가 잘못되었습니다. 내 프로젝트 주소: https://github.com/baiyulong/lenovo_parts

@baiyulong 사용자 대시보드의 디렉토리 구조를 기반으로 직접 하지 않는 이유는 무엇입니까?

@sorrycc 지금 user-dashboard 디렉토리 구조를 사용하고 있는데 dva 라우팅을 위한 특별한 처리나 글이 있나요?
export default function({ history }) {
return (
<Router history={history}>
<IndexRoute component={HomePage} />
<Route path='/' component={HomePage}>
<Route path='/create' component={CreateOrder} />
</Route>
</Router>
)
}
내가 쓴 이 경로, HomePage는 할 수 있고, 나는 <Link to='/create'>Create</Link> 링크를 썼다, 나는 그것을 클릭한 후 CreateOrder 컴포넌트로 갈 수 없다

@baiyulong dva 의 경로를 작성하는 특별한 방법은 없습니다. 다음을 시도하십시오.

1. 오류가 있습니까
2. /create 경로에 직접 액세스해 보세요.

@nikogu 감사합니다. 중첩을 풀고 나면 괜찮을 것입니다.

안녕하세요, dva가 모델의 핫 로딩을 지원할 수 있습니까?

@kkf1190 은 이를 고려 중이며 지원하겠습니다.

👍

그저 고맙다는 말을 하고 싶었습니다. . .

예전부터 vuejs의 vue-cli 스캐폴딩이 참 좋다는 생각을 했었는데 이 글을 읽고 생각이 완전히 바뀌었습니다.

아주 멋진 프레임! 잠시 연구했습니다. @sorrycc Yunda에게 두 가지 질문을 하고 싶습니다.

1. 반응 네이티브 프로젝트에서 dva를 완벽하게 사용할 수 있습니까?
2. dva+reactjs가 서버 측 렌더링을 잘 지원할 수 있습니까?

@freemember007

1. 반응 네이티브 지원, 참조 예: https://github.com/sorrycc/dva-example-react-native
2. 이론상 서버 운용에는 문제가 없고, 그 뒤에 있는 redux와 react-router 모두 SSR을 지원하지만 dva에 적용하는 데 시간이 좀 걸릴 것입니다.

@sorrycc 지금 고차 리듀서 지원을 위한 솔루션이 있습니까? 우리 프로젝트는 재사용 때문에 많은 고차 감속기를 사용합니다.

@ancheel 에서 지원하며 전역 또는 로컬이 될 수 있으며 사용 사례 참조: https://github.com/dvajs/dva/blob/master/test/reducers-test.js

모델의 상태를 수정한 후 다시 수정하는 방법은 항상 이 문제가 지금 발생합니다.
antd.js:32924 경고: setState(...): 기존 상태 전환 중에는 업데이트할 수 없습니다(예: render 또는 다른 구성 요소의 생성자 내에서).렌더 메서드는 props 및 state의 순수 함수여야 합니다. 부작용은 안티 패턴이지만 componentWillMount 로 이동할 수 있습니다.

매우 흥미롭습니다. 프로덕션 환경에서 사용하려고 합니다. 계속해서 최적화하고 개선할 수 있기를 바랍니다.

너프해!

수고하셨습니다.감사합니다!!

@sorrycc 서버 측 렌더링 지원을 기대합니다!

@mountainmoon 에서 지원하며 https://github.com/sorrycc/dva-boilerplate-isomorphic 을 참조하세요.

바퀴의 물결이 왔다 :+1:

안녕하세요, 저는 이 dva를 배우기 위해 연락을 취했습니다. 며칠 동안 코드를 읽은 후 마음에 몇 가지 질문이 있습니다. 묻고 싶습니다.
귀하의 데모는 모두 단일 페이지 응용 프로그램이지만 모두 개발 중인 다중 페이지 응용 프로그램인 것을 봤습니다. 다중 페이지 응용 프로그램 개발에서 라우팅이 사용되지 않는 경우 대신 구성 요소를 로드하는 방법을 묻고 싶습니다. 내가 라우팅을 사용하지 않기 때문에 약간 혼란스럽습니다. 그래서 모델에 설정된 리스너는 트리거할 위치가 명확하지 않습니다.
history.listen( 위치 => {
if(위치.경로명 === '/사용자') {
보내다({
유형:'querySuccess',
유효 탑재량:{}
})
}
})
추신: querySuccess 메서드에서 데이터를 로드하고 내보내기 기본 connect(mapStateToProps)(Users)를 사용할 때 오류도 보고됩니다.
connect.js:41 잡히지 않은 TypeError: 클래스를 함수로 호출할 수 없습니다.
순식간에 바보가 된 기분이 드는데, 귀찮게 설명드려도 될런지 모르겠습니다. 감사합니다!

왜 dva? 영어로 말 해주세요

나는 이런 방식의 글쓰기를 별로 좋아하지 않는다.

@codering user-dashboard에서 antd form 컴포넌트를 사용한다고 말씀하셨는데 순수 컴포넌트에는 사용할 수 없는 걸로 기억하는데 지금 가능한가요?
저도 가장 많이 접해보았는데 순수 함수 컴포넌트라면 props.form.getFieldDecorator를 통해서 getFieldDecorator 함수를 얻을 수 없습니다.
나는 신에게 해결책이 있는지 모르겠다 @sorrycc

같은 페이지를 영어로 시작할 수 있습니까? 우리는 이것을 이해할 수 없으며 왜 dva가 필요합니까?

안녕하세요, 대규모 프로젝트라면 그 상태가 매우 커서 처리하기가 매우 번거로울 것입니다.여러 개의 모델로 분할해야합니까?

@yazhou-zyz 나는 당신과 같은 문제가 있습니다:
경고: setState(...): 기존 상태 전환(예: 렌더 또는 다른 구성 요소의 생성자 내에서) 동안 업데이트할 수 없습니다. 렌더 메서드는 props 및 state의 순수한 함수여야 합니다. 생성자 부작용은 반패턴이지만 componentWillMount로 이동할 수 있습니다.
어떻게 해결하셨는지 여쭤보고 싶습니다.

배우다

계속 공부하다

dva는 건설 프로젝트에 큰 참고 가치가 있습니다.

잘했어~

영어로 된 문서는 어디에서 찾을 수 있습니까 ??? 번역 엔진으로 주제를 번역하는 것은 문제가 있고 이해가 충분하지 않습니다. 영어로 여러분은 세계에 도달할 수 있습니다. 좋은 일을 계속하십시오! :로켓:

dva는 React-native 0.47.X 및 React16.0.0 버전에서 시도되지 않습니다.

@vecold 는 초대 코드나 오류 메시지를 사용할 수 없다고 항상 사용할 수 있었습니다.

문서의 영어 번역을 얻을 수 있는 기회가 있습니까?
감사 해요!

비즈니스 코드에서 이러한 예가 일반적입니다.로컬 상태 업데이트는 전체 본문에 영향을 줄 수 있습니다.다시 렌더링할 필요가 없는 많은 위치도 다시 렌더링되어 페이지 성능이 크게 저하됩니다. 불필요한 mapStateToProps 계산을 줄이고 다시 렌더링하기 위해 redux 연결이 의존하는 상태를 자동으로 분석하기 위해 이 기능을 추가할 수 있습니까 👍

매우 좋은
하지만 단일 페이지를 만들려고 할 때 모든 페이지를 빌드합니다.

_비공식 번역_

왜 드바?

리덕스가 좋습니다. 그러나 너무 많은 개념, 분리된 감속기, 무용담 및 작업(다른 파일로 분할)이 있습니다.

1. 감속기, 현자 및 작업 사이를 자주 전환해야 함
2. 비즈니스 모델(또는 도메인 모델)을 구성하는 데 불편함. exp.의 경우 이미 user_list가 있고 product_list가 필요한 경우 파일 사본을 복제해야 합니다.
3. 사가는 쓰기 어렵습니다. 모든 단일 작업에 대해 포크 -> 감시자 -> 작업자를 만들어야 합니다.
4. 입력이 번거롭고 복잡하다

드바가 뭐야?

기존 프레임워크(redux + react-router + redux-saga ...)에 대한 라이트 래퍼입니다. 새로운 개념이 포함되지 않았습니다. < 100줄 코드. (느릅나무와 추에서 영감을 받았습니다. )

라이브러리가 아니라 프레임워크입니다. Ember.js와 마찬가지로 각 부분을 작성하는 방식을 제한합니다. 팀워크를 위해 더 쉽게 제어할 수 있습니다. Dva는 react 및 react-dom을 제외한 모든 종속성을 peerDependencies로 캡슐화합니다.

그것의 구현은 가능한 한 적게 새로운 구문을 도입합니다. 종속성을 재사용합니다. exp.의 경우 라우터 정의는 react-router의 JSX와 완전히 동일합니다.

핵심 기능은 app.model 입니다. reducer, initialState, action, saga를 모두 캡슐화합니다.

app.model({
  namespace: 'products',
  state: {
    list: [],
    loading: false,
  },
  subscriptions: [
    function(dispatch) {
      dispatch({type: 'products/query'});
    },
  ],
  effects: {
    ['products/query']: function*() {
      yield call(delay(800));
      yield put({
        type: 'products/query/success',
        payload: ['ant-tool', 'roof'],
      });
    },
  },
  reducers: {
    ['products/query'](state) {
      return { ...state, loading: true, };
    },
    ['products/query/success'](state, { payload }) {
      return { ...state, loading: false, list: payload };
    },
  },
});

우리는 sagas/products.js, reducers/products.js actions/products.js 를 만들고 그들 사이에서 전환하곤 했습니다.

핵심:

• 네임스페이스: key rootReducer 개체에 있는 reducer 의 key
• 상태: initialState 의 reducer
• 구독: dom이 준비되면 실행되는 [email protected] 의 새로운 개념: FRP에게 작별 인사
• 효과: 쉬운 현자
• 감속기

사용하는 방법

예시 보기

로드맵

• devtool 핫 리로드
• 라우터에 대한 동적 구성
• Effects 는 더 많은 saga 모델을 지원합니다.
• 단위 테스트
• 더 많은 예: todolist, antd-init 사용자, 인기 제품

자주하는 질문

개발 도구 지원?

redux-devtool, css livereload와 호환됩니다. 핫 리로드에 더 많은 작업 필요

제품 환경에 좋은가요?

확실한

redux + redux-saga의 모든 기능을 포함합니까?

네

브라우저 호환성?

redux-saga로 인해 IE8이 없습니다. (나중에 thunk, promise, observable을 효과 레이어의 확장으로 적용할 수 있음)

유사해주세요

['products/query']: function*() {}
['products/query'](state) {}

구문은 무엇입니까? 배열을 함수 이름으로 사용할 수 있습니까?

@clemTheDasher 함수 이름은 JavaScript에서 계산된 키 (배열이 아님 )일 수 있습니다. 메서드 정의에 대한 자세한 참조 |

var obj = {
  property( parameters… ) {},
  *generator( parameters… ) {},
  async property( parameters… ) {},
  async* generator( parameters… ) {},

  // with computed keys:
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
  async [property]( parameters… ) {},

  // compare getter/setter syntax:
  get property() {},
  set property(value) {}
};

신규 이민자 보고서, 여기에 와서 프론트 엔드 지식을 배우기 위해 계속 열심히 노력하십시오.

@clemTheDasher 그것은 계산된 속성입니다.

링크가 https://github.com/dvajs/dva/tree/master/examples/count 404인 이유는 무엇입니까?

배우다!

신을 바라봐

신에게 감사합니다, 오픈 소스를 주셔서 감사합니다

나는 너희들에게서 배울 수 없다!

우리가 사용할 수 있는 편리한 프레임워크를 주셔서 감사합니다.

github의 데모 링크가 만료되었습니다.

@sorrycc는 이제 dva가 서버 측 렌더링을 지원합니까?

감속기는 다음과 같이 작성할 수 있습니다.

const reducer = (state, { type, payload }) => {
  switch (type) {
    case 'products/query':
      return { ...state, loading: true, };
    case 'products/query/success':
      return { ...state, loading: false, list: payload };
    default
      return state;
  }
}

app.model({
  reducer
})

이것은 감속기에 몇 가지 고차 방법을 적용하는 것을 가능하게 합니다.

Redux 작성 스타일은 간결하고 상태를 수정하는 데 한 줄만 있으면 되지만 구문적 설탕을 통해 여러 줄의 코드를 함께 작성하는 것 같습니다. 그러나 나머지 상태를 다음 정류장으로 전달하려면 ...state 를 사용해야 합니다. 그렇지 않으면 상태가 완료되지 않습니다. 즉, 리듀스 단계에서 잘못 작성하면 일부 상태가 손실될 수 있습니다.

어떤 면에서는 Vuex의 아이디어가 더 읽기 쉽고 자연스럽습니다. 이와 같이 작성하십시오(정확하지 않음).

const mutation = {
  ['products/query'](state) {
    state.loading = true
  },
  ['products/query/success'](state, payload) {
    state.loading = false
    state.list = payload
  }
}

코드 면에서 나는 (동기적으로) 수정하는 상태에만 관심이 있습니다. Vuex는 또한 state next-stop 배달을 위해 외부 레이어를 래핑해야 합니다. 아마도 배달 전에 일부 방어적인 검사(추측)가 수행되거나 후크가 심어질 수 있습니다.

dva 공식 홈페이지의 예시 페이지가 안나와서 에러가 나는지 물어보는데 업그레이드인가요?

유사해주세요

['products/query']: function*() {}
['products/query'](state) {}

구문은 무엇입니까? 배열을 함수 이름으로 사용할 수 있습니까?

ES6에서는 리터럴이 객체(표현식)를 객체의 속성 이름으로 정의할 수 있습니다. 즉, 표현식을 대괄호 안에 넣습니다.
와 같은

obj = {
  ['xxname']: 'what ever you defined',
  ['xxyy'](args) {
    ....
  }
}

'products/query'는 리듀서의 호출을 처리하는 데 사용되며 문자열을 통해 네임스페이스와 연결된다.나중에 프로젝트가 수백 개 메소드와 같이 더 커지면. 내 네임스페이스를 변경해야 하는 경우. 백 가지 방법을 바꾸려면?

@yesmeck 👍, 감속기 인핸서의 역할은 이전에 과소 평가되었습니다.

여기에 지원이 있는지 모르십니까?