Блог

Я начал с простого приложения 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?

Пожалуйста, дайте мне знать, если вам нужны какие-либо дополнительные сведения.