Redux: 불변 객체로 redux를 초기화하는 방법

당신이 원하는 건 이런 것 같아요

// stores/some-store.js
import Immutable from 'immutable'

const { Map, List, fromJS } = Immutable
const initialState = Map({
  foo: 'bar',
  fooList: List()
})

export function someStore (state = initialState, action) {
  if (action.type === 'FOO') {
    return state.set('foo', fromJS(action.foo))
  }
  if (action.type === 'FOO_LIST') {
    return state.set('fooList', fromJS(action.fooList))
  }

  return state
}

// stores/index.js
export { default as someStore } from './some-store'

// application.js
import * as stores from './stores'

const redux = createRedux(stores)

@emmenko가 보여준 것과 같은 기본 매개 변수를 사용하여 상점이 자체 초기 상태를 정의하도록해야합니다.

initialState 인수는 서버 또는 localStorage에서 상태를 다시 수화하는 데만 사용됩니다. ( @acdlite , 우리는 이것을 문서에서 설명하고 싶을 것입니다.)

즉, 시도한 것이 작동해야합니다. 누군가 조사 할 수 있습니까?

아니요, 시도한 내용이 작동하지 않습니다. 모든 매장의 초기 데이터를 한 곳에서 만들고 싶습니다. 나는 이것이 내가하지 말아야 할 일이라고 생각한다.

모든 매장의 초기 데이터를 한 곳에서 만들고 싶습니다. 나는 이것이 내가하지 말아야 할 일이라고 생각한다.

그것은 당신에게 달려 있습니다. 초기 데이터를 나누는 것이 더 좋습니다.

그래도 작동하지 않는 것이 있으면 열어 두겠습니다. 다음 주에 다시 방문하여 작동하지 않는 이유를 살펴 보겠습니다.

문제는 함께 composeStores 일반 JS 객체가 루트 상태를 가정하여,와 함께 속성에 액세스하고 있음 state[key] 실패하는 Immutable.Map . 일반 JS 속성을 통해 필드에 액세스 할 수 있기 때문에 Immutable.Record 와 함께 작동 할 수 있다고 생각합니다.

하지만 평범한 물체를 가정하는 다른 곳이있을 수 있습니다.

오. 대단한 캐치입니다! 설명 해주셔서 감사합니다. 이것은 완벽하게 이해됩니다.

커넥터 사용도 isPlainObject(Immutable.Record) === false 같은 이유로 실패합니다.

@pierregm 이것은 실제로 맞습니다. 구성 요소 소품에 레코드 속성을 분산하면 어쨌든 작동하지 않습니다. select={state => state.get('something').toJS()} 작성하는 것은 귀하에게 달려 있습니다.

이렇게 작동하도록 만들 수있었습니다.

// store
const initialState = Immutable.fromJS({}).toOrderedMap();

export default function streamStore(state = initialState, action) {
  switch (action.type) {

    case actionTypes.FETCH_STREAM_DONE:
      var streamMap = {};

      for (var i in action.stream_data) {
        var item = action.stream_data[i];
        streamMap[item.id] = item;
      }
      return state.merge(Immutable.fromJS(streamMap).toOrderedMap());

    default:
      return state
  }
};

// select
function select(state) {
  return {stream: state.stream.toList()}
}

완벽하게 작동하지만 스트림의 모든 항목을 다시 렌더링합니다 (목록보기). 매장 수준에서 이전 상태와 새 상태를 비교하고 데이터에 변경 사항이 없을 때 구성 요소를 렌더링 할 필요성을 무효화하는 것을 어떻게 구현할 수 있는지 궁금합니다. NuclearJS는 불변 구조로이를 수행합니다. redux에서 이와 같은 것을 구현하는 것이 권장되는 방법은 무엇입니까?

오 와이스

Reselect : https://github.com/faassen/reselect를 확인

@gaearon 쿨! ReactEurope BTW에서 멋진 이야기! 감사.

이것은 redux 1.0.0, https://github.com/gajus/redux-immutable 과 함께 Immutable.js를 사용하려는 시도입니다.

좋은 @gajus! 지금 redux-immutable 테스트하고 https://github.com/gajus/canonical-reducer-composition 패턴을 정말 좋아합니다.

@chiplay 감사합니다. 결함이 있거나 개선 할 아이디어가 있으면 피드백에 감사드립니다.

redux와 함께 불변 구조를 사용하는 이점이 있습니까? redux가 불변의 행동을 기반으로하는 경우 (예 : 저장소가 상태의 새로운 사본을 반환)? 성능 (어떤 벤치 마크?)? 또는 다른 것? 고마워

뿡뿡

Redux와 함께 Immutable 사용의 장점 :

• 실수로 변경할 수 없습니다.
• 대형 어레이 및 객체로 더 빠른 성능과 더 나은 메모리 소비

Redux와 함께 Immutable 사용의 단점 :

• 팀을 위해 배울 수있는 새로운 API
• 번들 크기 증가
• 디버그가 약간 까다 롭습니다.

트레이드 오프는 당신에게 달려 있습니다!

@gaearon
빠르고 도움이되는 답변에 감사드립니다!

Redux 표준을 준수하는 ImmutableJs 및 Redux를 원한다면 https://github.com/indexiatech/redux-immutablejs를 살펴볼 수 있습니다.

@gaearon 웹 사이트에 링크를 넣을 수 있습니까?

Asaf 감사합니다. 사람들이 유용하다고 생각할 것입니다.

2015 년 9 월 4 일 18:36에 Asaf Shakarchi [email protected] 은 다음과 같이 썼습니다.

Redux 표준을 준수하는 ImmutableJs 및 Redux를 원한다면 https://github.com/indexiatech/redux-immutablejs를 살펴볼 수 있습니다.

@gaearon 웹 사이트에 링크를 넣을 수 있습니까?

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.

@asaf

좋은 일입니다. Ecosystem.md PR을 해주시겠습니까?
프로젝트에 테스트를 추가하면 기꺼이 추가하겠습니다.

@gaearon 단위 테스트 완료, PR : https://github.com/rackt/redux/pull/707

감사!

안녕하세요,
@gaearon에 대한 약간의 질문입니다. 지금까지 기존 React / Redux 앱에서 ImmutableJS를 구현하기 위해 수행 한 빠른 테스트에서 약간 느리게 느껴집니다.

기본 사용 사례 : API 호출에서 데이터 모음을 가져 와서 감속기에 저장 ...

내 감속기에서
ImmutableJS없이 ​​:

const initialStore = {
    isLoading : false,
    error     : null,
    data      : []
}

// in the switch case
return {
   ...state,
   isLoading: false,
   error: null,
   data: action.result
}

ImmutableJS 사용

const initialStore = Map({
    isLoading : false,
    error     : null,
    data      : List()
})

// in the handler function
return state.merge({
    isLoading: false,
    error: null,
    data: List(result.result)
})

ImmutableJS "치료"가 여기에서 더 많은 비용이 들지 않는지 궁금합니다.

Immutability에서 이해 한 바에 따르면 렌더링이 빠르게 진행될 때 이점이 더 많습니다.

의견을 보내 주셔서 감사합니다.

이점은 대형 어레이 및 객체에서 작동하는 데 메모리 비용이 적게 들고 더 빠르게 작동한다는 것입니다. 작은 응용 프로그램에서는 큰 차이가 없습니다.

알았어 고마워.
그래서 나는 어쨌든 올바른 접근 방식을 가지고 있습니까?

네, 잘 어울립니다.

지금까지 그만한 가치가있었습니다 .. 💯