immutable.jsでreduxを変換する方法

Question

使用方法を練習しようとしていますimmutable.js
しかし、私のレデューサーを不変の方法で編集する方法はわかりません。 （私はgithub上でいくつかのコードを見つけようとしますが、それらは基本的です）
また、私のコンポーネントにもエラーがあります。
私は私の減速機をリファクタリングする方法を私にギルドに助けを求めたいですか？ここで

が私の元reducer.js

元reducer.js

import * as TYPE from '../constants/ActionTypes'; 

const INIT_STATE = { 
    box: [ 
    { 'id': 1, 
     'axisX': 10, 
     'axisY': 10, 
     'width': 200, 
     'height': 200, 
    }, 
    { 'id': 2, 
     'axisX': 20, 
     'axisY': 300, 
     'width': 200, 
     'height': 200, 
    } 
    ] 
}; 


export default function editZone(state = INIT_STATE, action) { 
    let newState = null; 
    switch (action.type) { 
    case TYPE.UPDATE_POSITION: 
     newState = Object.assign({}, state); 
     newState.box = newState.box.map(box => { 
     if (box.id === action.payload.id) { 
      box.axisX = action.payload.x; 
      box.axisY = action.payload.y; 
     } 
     return box; 
     }); 
     return newState; 
    default: 
     return state; 
    } 
} 

そして、私はそれがimmutable.jsを使用するために編集され、私はちょうどfromJS()

**不変でラップINIT_STATEを追加します減速材.js **

import {List, Map, fromJS} from 'immutable'; 

const INIT_STATE = fromJS({ 
     box: [ 
     { 'id': 1, 
      'axisX': 10, 
      'axisY': 10, 
      'width': 200, 
      'height': 200, 
     }, 
     { 'id': 2, 
      'axisX': 20, 
      'axisY': 300, 
      'width': 200, 
      'height': 200, 
     } 
     ] 
    }); 

そして、私はエラーに直面：TypeError: Cannot read property 'map' of undefined
私はそれは私がこれをどのように修正することができますMap {size: 2, _root: ArrayMapNode, __ownerID: undefined, __hash: undefined, __altered: false}
示した出力this.props.editZone
コンソールしようとすると？私は私のコードでImmutable.jsを使用しています

boxComponent.js

const boxes = this.props.editZone.box; 
const playgroundObjetcs = boxes.map(box => { 
    return (...) 
}); 

Answer 1

。

これはあなたに役立つと思います。

減速

import Immutable from 'immutable'; 
import actionConsts from 'constants/actions'; 

const initialState = Immutable.fromJS({ 
    isUserLoggedIn: false 
}); 

const user = (state = initialState, action = {}) => { 
    switch (action.type) { 
     case actionConsts.get('RECEIVE_INIT_DATA'): 
      return state.merge(Immutable.fromJS(action.payload.user)); 
     default: 
      return state; 
    } 
}; 

export default user; 

コンテナ

import React, { PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import Base from 'components/base'; 
import 'styles/app.sass'; 
import { fetchAppBaseData } from 'actions/init'; 
import { clearErrorAction } from 'actions/error'; 

class BaseContainer extends React.Component { 

    render() { 
     return (
      <Base {...this.props} /> 
     ); 
    } 
} 

BaseContainer.propTypes = { 
    skin: PropTypes.object.isRequired, 
    sim: PropTypes.object.isRequired, 
    user: PropTypes.object.isRequired, 
    children: PropTypes.object.isRequired, 
    fetchAppBase: PropTypes.func.isRequired, 
    clearError: PropTypes.func.isRequired 
}; 
BaseContainer.defaultProps = { 
    skin: {}, 
    user: {}, 
    sim: {} 
}; 

const mapStateToProps = (state) => ({ ...(state.toJS()) }); 

const mapDispatchToProps = (dispatch) => ({ 
    fetchAppBase() { 
     dispatch(fetchAppBaseData()); 
    }, 

    clearError() { 
     dispatch(clearErrorAction()); 
    } 
}); 

export default connect(mapStateToProps, mapDispatchToProps)(BaseContainer); 

Answer 2

あなたはドットでオブジェクトのプロパティを参照することはできませんありませんそれはあなたがあなたの状態オブジェクトをfromJS Immutablejs関数に渡したときにあなたの減速機にマップを作成したので、あなたはImmutablejs Mapです。そのマップ上の関数マップを使用するには、Immutablejs APIを使用して新しいボックスを返す必要があります。古いボックスへの参照。

最初にgetIn関数を使用します。これは、古いボックスへの参照ではなく新しいボックスを返します。

どのようにあなたの状態を渡したかによって、私はあなたに決定的な答えを与えることができません。私はあなたの初期状態で関数名としてしか見ることができないので、editZoneプロパティがどこから来ているのか混乱します。あなたの状態をスライスし、関数名からプロパティを作成しますか？しかし、いずれにせよ、あなたはの線に沿って何かを試すことができます

変更：

のconstボックス= this.props.editZone.box。 const playgroundObjetcs = boxes.map（box => {return（...）}））;

：を

CONST playgroundObjects = this.props.getIn（[ 'editZone'、 'ボックス']）マップ（ボックス=> {リターン（...）}）。

あるいは試みる：

CONST箱= this.props.editZone.box.toJS（） playgroundObjetcs = boxes.map（ボックス=> {リターン（...）を}）。

これはうまくいけば、これは何が起こっているのか分かります。