在为状态树实现immutable.js之后遇到调度方法的问题

时间:2016-09-29 18:21:53

标签: redux react-redux

我开始使用一个简单的react-redux应用程序,其中状态树通过Object.assign()变为不可变的。应用程序似乎完美无缺。与我的下一个需求迭代不同,状态树通过使用不可变的js而变得不可变。以下是如何将其实现为不可变状态树。

//user.js - reducer
import { Map } from 'immutable';
import  { setCompanyName, setCompanyMessage,
setUserName , setJobTitle ,
setAddressLine1, setAddressLine2,
setPhoneNumber, setEmailAddress,
setWebAddress } from './user-action-handlers.js';

const user = (state = Map({}), action)=> {

switch(action.type){
    case 'SET_COMPANY_NAME':
        return  setCompanyName(
            state, 
            action.companyName
         );

    default: 
        return state;
 }

}

export default user;


//user-action-handler.js
import { Map } from 'immutable';

export const setCompanyName = (currentState = {}, name = '')=> {
  return  currentState.set('companyName',name);
}

我的组件正在尝试通过订阅事件来打开模态对话框(react-modal - https://github.com/reactjs/react-modal)。如下:

visibilityController: function() {
    if (this.store.getState().get('textEditorVisiblityFilter') ===    'SHOW_TEXT_EDITOR') {
        this.openModal();
    } else {
        this.closeModal();
    }

},
componentDidMount: function() {

    this.store = this.context.store;
    this.store.subscribe(this.visibilityController);

},

以下是我从其他组件发送动作的方法。

let EditorToolBar = ({
    dispatch
}) => {

    let toolbarBtnStyle = className('btn btn-primary toolbar-button', styles.editorToolBarBnt);
    return (
        <div className="container" >
        <div className= "row">
            <div className="col-md-12">
                <div>
                    <button type="button" className={ toolbarBtnStyle } id="toolbar-text"
                        onClick={
                                ()=> {  
                                dispatch(setVisiblityFilterForTextEditor('SHOW_TEXT_EDITOR'))
                            }
                            }>
                        <span className="glyphicon glyphicon-font"></span>
                    </button>       
                </div>
            </div>
        </div>

    </div>
    );
} //class ends

EditorToolBar = connect()(EditorToolBar);
export default EditorToolBar;

每次发送邮件时,我都会收到以下警告。

Warning: setState(...): You passed an undefined or null state object; instead, use forceUpdate().

我很确定在引入不可变的js之后这种情况就开始发生了。 我很震惊,似乎失去了很多时间和精力。我是否提到这是我第一次尝试Redux?

如果您需要任何进一步的详细信息,请与我们联系。

0 个答案:

没有答案