combineReducers, Redux durumunu yok eder ve aynı zamanda çoklu ImmutableJs redüktörlerini bozar (

Question

). Ben tipik ReactJS ve Redux app tuts ile uçtum ve kendi app üzerinde çalışıyorum. Sorun, Redux deposu için tek bir redüktör yaratmak için combineReducers() kullanıldığında ortaya çıkar. Şu anda, kendi başına, createStore() için redüktör parametresi olarak eklendiğinde iyi çalışan üç redüktörüm var. İlk redüktör Hareketimin tutan ve denir: ayrı listeler için bazı kukla içeriği yaymak için ImmutableJS kullanılarak oluşturulan edilir

import { isActive } from '../actions/HeaderActions'; 

export const initialButtonState = { 
    isActive: false, 
    invertStyles: false 
} 

export default (state = initialButtonState, action) => { 
    switch (action.type) { 
    case 'SET_ACTIVE': 
     return { 
     ...state, 
     isActive: action.isActive(state), 
     invertStyles: action.invertStyles(state), 
     } 

    default: 
     return state 
    } 
} 

ikinci ve üçüncü redüktör

HeaderReducer. Yine, tek tek bu redüktörler kendi başlarına çalışırlar, ancak birleştirildiğinde, Reducers() onları birleştirir. İkinci redüktör dosyası denir: Üçüncü dosya adı verilir

import Immutable from 'immutable'; 

const messagesList = Immutable.List(['9:00AM - 9:30AM','10:30AM -  11:30AM','11:45AM - 12:30PM','1:00PM - 2:15PM','3:00PM - 4:00PM']); 

export default (state = messagesList, action) => { 
    switch(action.type) { 
    case 'addItem': 
     return state.push(action.item) 
    case 'deleteItem': 
     return state.filter((item, index) => index !== action.index) 
    default: 
     return state 
    } 
} 

ListItems

:

import Immutable from 'immutable'; 

const quotesList = Immutable.List(['Company A: 100.00$','Company B:  200.00$','Company C: 300.00$','Company D: 400.00$','Company E: 500.00$<']); 

export default (state = quotesList, action) => { 
    switch(action.type) { 
    case 'addItem': 
     return state.push(action.item) 
    case 'deleteItem': 
     return state.filter((item, index) => index !== action.index) 
    default: 
     return state 
    } 
} 

QuotesList

Ben düşürücüler içinde index.js yoluyla ihraç tüm dosyaları var klasör:

index.js

benim mağaza oluşturmak için çağrılan

export { default as HeaderReducers } from './HeaderReducers'; 
export { default as ListItems } from './MessageList'; 
export { default as QuotesList } from './QuotesList'; 

ve sonra:

Store.js

import { createStore, combineReducers } from 'redux'; 
import * as reducers from '../reducers'; 
// import HeaderReducers from '../reducers/HeaderReducers'; 
// import ListItems from '../reducers/MessageList'; 
// import QuotesList from '../reducers/QuotesList'; 

// let reducer = combineReducers({ ListItems: ListItems, quotes:  QuotesList}) 

// export default createStore(ListItems) 

const reducer = combineReducers(reducers); 
export default createStore(reducer); 

açılışında deposunun durumunu açılıyor kullandığım redüktör bağlı bir nesne veya List döndürür . Onları combineReducer() ile çalıştırdığımda, her bir redüktörü bir arada tutan tek bir Nesne aldım. Ne hemen kırar Konsolu "_ListItems.map bir işlev değil" gösterir ListItems.js

import React from 'react'; 
import { connect } from 'react-redux'; 
import NewItem from './NewItem'; 
import { addItem, deleteItem } from '../../../actions/HeaderActions'; 
    const ListItems = ({ListItems, dispatch}) => (
     <div> 
     <ul> 
      {ListItems.map((ListItem, index) => <li><span key={index}> {ListItem} <button onClick={e => { 
      dispatch(deleteItem(index)) 
      }}>X</button></span></li>)} 
     </ul> 

     <NewItem /> 
     </div> 
    ) 
function mapStateToProps(ListItems) { 
    return { 
    ListItems, 
    } 
} 
export default connect(mapStateToProps)(ListItems) 

I kurulum var bir .map fonksiyonudur. Gittim ve mapStateToProps dönüş değeri düzenlemeyi denedim ama payet atıyorum. Bunu okuduğunuz için teşekkürler. Herhangi bir yardım kesinlikle takdir edilmektedir.

Answer 1

combineReducers değişmezi desteklemiyor. Bunun yerine redux-immutable birleştirmeyiReducers deneyin. Geçenlerde iş yerinde projelerin birinde bu kullandık

import { 
    combineReducers 
} from 'redux-immutable'; 

import { 
    createStore 
} from 'redux'; 

const initialState = Immutable.Map(); 
const rootReducer = combineReducers({}); 
const store = createStore(rootReducer, initialState); 

Ancak bakarak:

Answer 2

Immutable yapılarla çalışmıyor düşürücüler birleştirin, sen redux-immutable kullanabilirsiniz, uzlaşma değişiklikleri saptamak için olması gerekir Kodunuzu, hem değişmez hem de değişebilir durumlara sahip olmanın genellikle kötü bir fikir olduğunu söyleyebilirim, bunu basit yapılarla veya tam olarak değişmez olarak saklamanız gerekir.

ImmutableJS büyük olsa da, bunun doğrudan bir dilde (kullanıcı kitaplığıdır) tam olarak bütünleştirilmemiş olması, çok ayrıntılı kod tabanlarına yol açabilir, başka bir alternatif ise, durumunuzu mutasyona uğratmamak için Object.freeze'u kullanmaktır. Normal birleştirici redüktörleri redux'dan koruyabilirsiniz.