Uncaught error reducers may not dispatch actions

I agree this should be impossible. However I managed to recreate this using Chrome 75.0.3770.100. I’m trying to get this to happen again but I haven’t managed to get it to happen again. But I would be interested if someone else can get it to happen again. I burrowed the prime number functions from https://www.npmjs.com/package/prime-number

/**
 * Benchmark a primality algorythm
 *
 * @param {Function} isPrime
 *
 * @returns {Function} checkPrimality (from, to)
 */
function primeBenchMark(isPrime) {
  /**
   * Primality check on given range
   *
   * @param {Number} from
   * @param {Number} to
   */
  return function checkPrimality(from, to) {
    console.time('primality benchmark');

    var countPrimes = 0;

    for (var i = from; i <= to; i++) if (isPrime(i)) countPrimes++;

    console.log(`Found ${countPrimes} primes`);

    console.timeEnd('primality benchmark');
  };
}

/**
 * Check if a number is prime
 *
 * @param {Number} n
 *
 * @returns {Boolean} isPrime
 */
function primeNumber(n) {
  if (n === 2) return true; // 2 is a special case
  if (n % 2 === 0) return false;
  for (var i = 3; i <= Math.sqrt(n); i = i + 2) {
    if (!primeNumber(i)) continue; // <-- recursion here
    if (n % i === 0) return false;
  }
  return true;
}

let lock = false;
let count = 0;

/**
 * A function that checks javascript is single threaded, by setting a lock, and computing a prime numbers, given js is
 * single threaded each iteration should finish executing before the next one begins
 *
 * @return {void}
 */
function lockedFunction() {
  count++;
  console.info(`Started ${count}`);

  if (lock) {
    throw new Error(`Not single threaded ${lock} hasn't finished executing before ${count} executed`);
  }

  try {
    lock = count;
    primeBenchMark(primeNumber)(10000, 500000);
  } finally {
    lock = false;
  }

  console.info(`Ended ${count}`);
};


/**
 * Runs a given function many times
 *
 * @param {function} func the function to run
 * @param {number} times to run the calculation
 * @param {number} delay ms delay time between executions
 *
 * @return {void}
 */
function runMany(func, times, delay) {
  let count = 0;

  function runCycle() {
    func();
    if (count < times) {
      count++;
      setTimeout(runCycle, delay);
    }
  };

  runCycle();
};

/**
 * Runs a function that computes prime numbers many times
 *
 * @param {number} times to run the calculation
 * @param {number} delay ms delay time between executions
 *
 * @return {void}
 */
function lockTest(times = 100, delay = 50) {
  runMany(lockedFunction, times, delay);
};

Running lockTest(); a few times in the console I got this to finally happen

Started 325
index.js?m=1562193618:155900 Started 326
index.js?m=1562193618:155900 Uncaught Error: Not single threaded 325 hasn't finished executing before 326 executed
    at lockedFunction (index.js?m=1562193618:155900)
    at runCycle (index.js?m=1562193618:155907)
lockedFunction @ index.js?m=1562193618:155900
runCycle @ index.js?m=1562193618:155907
setTimeout (async)
runCycle @ index.js?m=1562193618:155907
setTimeout (async)
runCycle @ index.js?m=1562193618:155907
setTimeout (async)
runCycle @ index.js?m=1562193618:155907
setTimeout (async)
runCycle @ index.js?m=1562193618:155907
runMany @ index.js?m=1562193618:155907
lockTest @ index.js?m=1562193618:155914
(anonymous) @ VM293424:1
index.js?m=1562193618:155900 Started 327

Preface

It’s been a while since using React to write requirements. Many problems have been encountered in the middle. Most of them can barely cope with Baidu and Googled. There are a lot of learning and communication groups that I don’t understand. Guys ask for advice. Today, when I routinely use dva to write requirements, I encountered a problem. Baidu hasn’t answered for a long time, and then I followed the error message and finally found the source of the problem.

error

Below is a screenshot of the error

The error is actually obviousUncaught Error:Reducer may not dispatch actions. The error message is increateStore.js:160Where to go, this is where the redux source code creates store objects. I wonder if it is impossible to study the source code.

createStore.js

The following is the context of the error content

  let currentReducer = reducer
  let currentState = preloadedState
  let currentListeners = []
  let nextListeners = currentListeners
  let isDispatching = false

  function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
          'Use custom middleware for async actions.'
      )
    }

    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
          'Have you misspelled a constant?'
      )
    }

    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }

You can see that the specific code for the error is

if (isDispatching) {
    throw new Error('Reducers may not dispatch actions.')
}

whenisDispatchingfortrueWill throw this error, and then you can see when everydispatchWill go down whentrywillisDispatchingSet totruebycurrentReducerwithaction, Update the currentstore tree,only atfinallyWillisDispatchingSet tofalse, So when againdispatchBecause the state is stilltrue, So this error was thrown.

the reason

Internet Baidu thisisDispatchingThe meaning of this global state, the explanation given on the Internet is:

The globally defined isDispatching is used to lock the changing store tree; that is, the next change is allowed only after the store tree is changed this time, to avoid the problem of unsynchronized results when the store tree responds to multiple changes ; But in fact, this way of writing also determines that the current store tree can only respond to synchronous changes (asynchronous changes need to be implemented by adding middleware)

to sum up

There will always be problems. If you encounter problems you haven’t seen before, you must learn Baidu (to move bricks for Baidu). In order to move bricks better, you should not be afraid of source code such as redux. Learn to try to read.

I am developing an app using fabric.js and redux/react.

Shortly, what I want is when I add an object on the canvas it got selected and written into the app state.

And here is what I have for now — when I click on an object on the canvas the «object:selected» event
is fired and I dispatch the action to save the selected object into the state of my app.

fabricCanvas.on('object:selected', function(options) {
    store.dispatch({ 
       type: 'SET_SELECTED_OBJECT',
       object: options.target 
    })
})

It works pretty well, but the fun starts when I try to automatically set object as selected when it’s added to the canvas.

fabricCanvas.on('object:added', function(options) {
   fabricCanvas.setActiveObject(options.target) 
})

The function setActiveObject() fires the «object:selected» which is pretty logical and I expected my handler with dispatch to work but instead it grants me with

Uncaught Error: Reducers may not dispatch actions.

I know that there is a restriction to dispatch actions from reducers but I can’t get why Redux thinks that I try to.

From the event handler I trigger another event which dispatch an action.
What I am doing wrong?

UPDATED:
Both handlers are defined in index.js right after the store and fabric defined.

import 'babel-polyfill';
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './components/App'

import { clearSelectedObject, setSelectedObject, addObject } from './actions'
import initialState from './initialState.js'



let store = createStore(rootReducer, initialState, window.devToolsExtension && window.devToolsExtension())


render(
    <div id="ocdc-holder">
        <Provider store={store}>
            <App />
        </Provider> 
    </div>,
    document.getElementById('root')
)

const fabricCanvas = new fabric.Canvas('canvas-lower')

fabricCanvas.on('object:added', function(options) {
   fabricCanvas.setActiveObject(options.target) 
})

fabricCanvas.on('object:selected', function(options) {
    store.dispatch({ 
       type: 'SET_SELECTED_OBJECT',
       object: options.target 
    })
})

Here is my reducers.js file http://pastebin.com/SFHZ9jVr

Я разрабатываю приложение, используя fabric.js и redux/реагирую.

В скором времени, я хочу, когда я добавляю объект на холсте, который он выбрал и записал в состояние приложения.

И вот то, что у меня есть сейчас — когда я нажимаю объект на холсте, происходит событие «объект: выбран», и я отправляю действие для сохранения выбранного объекта в состояние моего приложения.

fabricCanvas.on('object:selected', function(options) {
    store.dispatch({ 
       type: 'SET_SELECTED_OBJECT',
       object: options.target 
    })
})

Он работает очень хорошо, но забава начинается, когда я пытаюсь автоматически установить объект как выбранный, когда он добавлен в холст.

fabricCanvas.on('object:added', function(options) {
   fabricCanvas.setActiveObject(options.target) 
})

Функция setActiveObject() запускает «объект: выбран», что довольно логично, и я ожидал, что мой обработчик с диспетчером будет работать, но вместо этого он предоставляет мне

Uncaught Error: Reducers may not dispatch actions.

Я знаю, что существует ограничение на отправку действий с редукторов, но я не могу понять, почему Redux думает, что я пытаюсь.

Из обработчика событий я запускаю другое событие, которое отправляет действие. Что я делаю неправильно?

ОБНОВЛЕНО:
Оба обработчика определены в index.js сразу после определения магазина и ткани.

import 'babel-polyfill';
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './components/App'

import { clearSelectedObject, setSelectedObject, addObject } from './actions'
import initialState from './initialState.js'



let store = createStore(rootReducer, initialState, window.devToolsExtension && window.devToolsExtension())


render(
    <div id="ocdc-holder">
        <Provider store={store}>
            <App />
        </Provider> 
    </div>,
    document.getElementById('root')
)

const fabricCanvas = new fabric.Canvas('canvas-lower')

fabricCanvas.on('object:added', function(options) {
   fabricCanvas.setActiveObject(options.target) 
})

fabricCanvas.on('object:selected', function(options) {
    store.dispatch({ 
       type: 'SET_SELECTED_OBJECT',
       object: options.target 
    })
})

Вот мой файл reducers.js http://pastebin.com/SFHZ9jVr

Помогите пожалуйста, вообще не понимаю откуда ошибка. Сижу и голову ломаю.
Использовала Create React App для создания приложения (из документации).
Хочу сначала подключить и более менее ориентировать в redux, а потом присоединить react-router и react-router-redux.
Просто для теста хотела сделать добавление нового юзера (action).
Протянула action в нужный компонент и тут ошибка:
Uncaught Error: Actions may not have an undefined «type» property. Have you misspelled a constant?
Я по разному протягивала action, пробовала bindActionCreators, по другим примера писала configureStore, не понимаю.
Помогите пожалуйста, в чём ошибка?
Все файлы ниже

appReducer.js

import {ADD_USER} from '../constans/appConstants';

const initialState = {
    users: [
        {
            name: "Nastya",
            age: 20
        }
    ]
};

const appReducer = (state = initialState, action) => {

    switch(action.type){

        case ADD_USER: {
            let newUser = {
                name: action.name,
                age: action.age
            };
            return {
                ...state,
                users: state.users.push(newUser)
            }
        }

        default:
            return {
                ...state
            }
    }
};

export default appReducer;

Написала для добавления action

import {ADD_USER} from '../constans/appConstants';

export const addUser = (name, age) => {
    return {
        type: ADD_USER,
        name: name,
        age: age
    }
};

Файл configureStore:

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers/index';

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

const configureStore = initialState => (
    createStoreWithMiddleware(rootReducer, initialState)
);

export default configureStore;

Точка входа в приложение (index.js):

import registerServiceWorker from './registerServiceWorker';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import AppContainer from './containers/AppContainer';
import configureStore from './store/configureStore';

const render = (Component) => {
    ReactDOM.render(
        <Provider store={configureStore()}>
            <Component />
        </Provider>,
        document.getElementById('root'),
    );
};

render(AppContainer);

registerServiceWorker();

Контейнер AppContainer:

import React from 'react';
import {connect} from 'react-redux'
import {addUser} from '../actions/appActions'

import App from '../components/App';

const Application = props => <App {...props} />;

const mapStateToProps = state => ({
    appProps: state.appReducer
});

export default connect(mapStateToProps, {
    addUser
})(Application);

Компонент App:

import React, {Component} from 'react';

import AddUserForm from './AddUserForm';

class App extends Component {
    render() {
        let {addUser} = this.props;
        return (
            <div>
                <h1>Hello World</h1>
                <hr/><br/><br/>
                <AddUserForm addUser={addUser} />
            </div>
        )
    }
}

export default App;

И компонент AddUserForm:

import React, {Component} from 'react';

class AddUserForm extends Component {

    constructor(props){
        super(props);
        this.addNewUser = this.addNewUser.bind(this);
    }

    addNewUser() {
        let {addUser} = this.props;
        let name = this.inputUserName.value;
        let age = this.inputUserAge.value;
        addUser(name, age);
    }

    render() {
        return (
            <form>
                <input ref={input => {this.inputUserName = input}} type="text" name="name" placeholder="Name new user"/>
                <input ref={input => {this.inputUserAge = input}} type="text" name="age" placeholder="Age new user"/>
                <button onClick={this.addNewUser} type="button">Add User</button>
            </form>
        )
    }
}

export default AddUserForm;

fabricCanvas.on('object:selected', function(options) {
    store.dispatch({ 
       type: 'SET_SELECTED_OBJECT',
       object: options.target 
    })
})

fabricCanvas.on('object:added', function(options) {
   fabricCanvas.setActiveObject(options.target) 
})

Uncaught Error: Reducers may not dispatch actions.

import 'babel-polyfill';
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './components/App'

import { clearSelectedObject, setSelectedObject, addObject } from './actions'
import initialState from './initialState.js'



let store = createStore(rootReducer, initialState, window.devToolsExtension && window.devToolsExtension())


render(
    <div id="ocdc-holder">
        <Provider store={store}>
            <App />
        </Provider> 
    </div>,
    document.getElementById('root')
)

const fabricCanvas = new fabric.Canvas('canvas-lower')

fabricCanvas.on('object:added', function(options) {
   fabricCanvas.setActiveObject(options.target) 
})

fabricCanvas.on('object:selected', function(options) {
    store.dispatch({ 
       type: 'SET_SELECTED_OBJECT',
       object: options.target 
    })
})

1 ответ

Лучший ответ

const newTextObj = new fabric.Text(action.payload.text)
fabricCanvas.add(newTextObj)
fabricCanvas.fire('object:selected')
return {
    ...state,
    objects: [
        ...state.objects,
        newTextObj
    ]
}

// Somewhere in component, or where you are dispatching `ADD_TEXT` action.
const newTextObj = new fabric.Text(action.payload.text)
fabricCanvas.add(newTextObj)
fabricCanvas.fire('object:selected')