Redux: Como inicializar redux com objeto imutável

Eu acho que você quer algo assim

// 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)

Você deve deixar as lojas definirem seu próprio estado inicial usando o parâmetro padrão como @emmenko mostrou.

O argumento initialState deve ser usado apenas para reidratar o estado do servidor ou localStorage. ( @acdlite , podemos explicar isso na documentação).

Dito isso, o que você tentou deve funcionar. Alguém pode investigar?

Não, o que tentei não funcionou. Eu só quero criar dados iniciais para todas as lojas em um só lugar. Acho que é isso que não devo fazer.

Eu só quero criar dados iniciais para todas as lojas em um só lugar. Acho que é isso que não devo fazer.

Você decide. Acho melhor dividir os dados iniciais.

Mesmo assim, se algo não funcionar, vamos mantê-lo aberto? Vou revisitar na próxima semana e ver por que não funcionou.

O problema é com composeStores que está assumindo que o estado raiz é um objeto JS simples e acessando as propriedades com state[key] , que falha com Immutable.Map . Acho que pode funcionar com Immutable.Record pois isso torna os campos acessíveis por meio de propriedades JS regulares.

Pode haver outros lugares onde está assumindo um objeto simples.

Oh. Essa é uma grande captura! Obrigado por explicar. Isso faz todo o sentido.

O uso de conectores também falha pelo mesmo motivo: isPlainObject(Immutable.Record) === false .

@pierregm Isso está realmente correto. Se ele espalhou as propriedades do Registro sobre os adereços do componente, isso não funcionaria de qualquer maneira. Cabe a você escrever select={state => state.get('something').toJS()} .

Consegui fazer funcionar assim,

// 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()}
}

Funciona perfeitamente, mas acaba renderizando novamente todos os itens no stream (uma exibição de lista). Eu queria saber como alguém poderia implementar algo que compare o estado antigo com o novo estado no nível da loja e invalide a necessidade de renderizar quaisquer componentes ali mesmo quando não houver alterações nos dados. NuclearJS faz isso com estruturas imutáveis. Qual seria a forma recomendada de implementar algo assim no redux?

@owais

Confira Reselect: https://github.com/faassen/reselect. Ele fornece funcionalidade semelhante aos getters NuclearJS.

@gaearon Cool! Boa palestra no ReactEurope BTW! Obrigado.

Esta é minha tentativa de usar Immutable.js com redux 1.0.0, https://github.com/gajus/redux-immutable

Legal @gajus! Testando redux-immutable agora e realmente gostando do padrão https://github.com/gajus/canonical-reducer-composition

Obrigado @chiplay. Eu realmente gostaria de receber feedback caso você encontre deficiências ou tenha ideias para melhorias.

Existe alguma vantagem em usar estruturas imutáveis ​​junto com redux? quando o redux é baseado em comportamento imutável (por exemplo, as lojas retornam uma nova cópia do estado)? Desempenho (algum benchmark?)? ou alguma outra coisa? THX

@jsifalda

Prós de usar Immutable com Redux:

• Você não pode sofrer mutação por engano
• Desempenho muito mais rápido e melhor consumo de memória com grandes matrizes e objetos

Contras de usar Immutable com Redux:

• Nova API para aprender para sua equipe
• Aumento do tamanho do pacote
• Um pouco mais complicado de depurar

A compensação é com você!

@gaearon
muito obrigado pela resposta rápida e útil!

Se você quiser ImmutableJs & Redux em conformidade com os padrões Redux, você pode dar uma olhada em https://github.com/indexiatech/redux-immutablejs ,

@gaearon É possível colocar um link no site?

Obrigado Asaf. Tenho certeza de que as pessoas acharão útil.

Em 4 de setembro de 2015, às 18:36, Asaf Shakarchi [email protected] escreveu:

Se você quiser ImmutableJs & Redux em conformidade com os padrões Redux, você pode dar uma olhada em https://github.com/indexiatech/redux-immutablejs ,

@gaearon É possível colocar um link no site?

-
Responda a este e-mail diretamente ou visualize-o no GitHub.

@asaf

Bom material, você gostaria de fazer uma RP para Ecosystem.md ?
Ficarei feliz em adicioná-lo lá se você adicionar testes ao seu projeto.

@gaearon Feito com testes de unidade, PR é: https://github.com/rackt/redux/pull/707

Obrigado!

Olá a todos,
uma pequena pergunta para @gaearon , dos testes rápidos que fiz até agora para implementar ImmutableJS em meu aplicativo React / Redux existente, parece um pouco mais lento: - / mas talvez eu esteja fazendo algo de maneira errada ...

Caso de uso básico: obter uma coleção de dados de uma chamada de API e armazená-la em um redutor ...

Do meu redutor,
Sem ImmutableJS:

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

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

Com 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)
})

Estou me perguntando se o "tratamento" que o ImmutableJS está fazendo não está custando mais aqui?

Pelo que entendi de Imutabilidade, o benefício é mais quando a renderização acelera, certo?

Obrigado pelo seu feedback!

A vantagem é que operar em grandes arrays e objetos custa menos memória e funciona mais rápido. Não faz grande diferença em pequenas aplicações.

Ok, obrigado.
Então, eu tenho a abordagem certa de qualquer maneira?

Sim, parece bom para mim.

Até agora, a troca valeu a pena. 💯