我开始使用一个简单的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?
如果您需要任何进一步的详细信息,请与我们联系。