search

redux-utilities / redux-actions

Flux Standard Action utilities for Redux.
https://redux-actions.js.org
MIT License
6.51k stars 301 forks source link

can't use Map on handleActions #347

Open vendramini opened 5 years ago

vendramini commented 5 years ago

A simple example from docs:

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const increment = createAction(INCREMENT);
const decrement = createAction(DECREMENT);

const reducer = handleActions(
    new Map([
        [
            increment,
            (state, action) => ({
                counter: state.counter + action.payload
            })
        ],

        [
            decrement,
            (state, action) => ({
                counter: state.counter - action.payload
            })
        ]
    ]),
    { counter: 0 }
);

Gives me an error:

[ error ] { Invariant Violation: Expected handlers to be a plain object.
    at invariant (/test-project/front/node_modules/invariant/invariant.js:40:15)
    at handleActions (/test-project/front/node_modules/redux-actions/lib/handleActions.js:29:26)
    at Module../redux/reducers/areas.js (/test-project/front/build/server/static/development/pages/_app.js:3385:82)
    at __webpack_require__ (/test-project/front/build/server/static/development/pages/_app.js:23:31)
    at Module../components/header/index.js (/test-project/front/build/server/static/development/pages/_app.js:464:80)
    at __webpack_require__ (/test-project/front/build/server/static/development/pages/_app.js:23:31)
    at Module../pages/_app.js (/test-project/front/build/server/static/development/pages/_app.js:3115:77)
    at __webpack_require__ (/test-project/front/build/server/static/development/pages/_app.js:23:31)
    at Object.0 (/test-project/front/build/server/static/development/pages/_app.js:3867:18)
    at __webpack_require__ (/test-project/front/build/server/static/development/pages/_app.js:23:31)
    at /test-project/front/build/server/static/development/pages/_app.js:91:18
    at Object.<anonymous> (/test-project/front/build/server/static/development/pages/_app.js:94:10)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12) name: 'Invariant Violation', framesToPop: 1 }
{ Invariant Violation: Expected handlers to be a plain object.
    at invariant (/test-project/front/node_modules/invariant/invariant.js:40:15)
    at handleActions (/test-project/front/node_modules/redux-actions/lib/handleActions.js:29:26)
    at Module../redux/reducers/areas.js (/test-project/front/build/server/static/development/pages/_app.js:3385:82)
    at __webpack_require__ (/test-project/front/build/server/static/development/pages/_app.js:23:31)
    at Module../components/header/index.js (/test-project/front/build/server/static/development/pages/_app.js:464:80)
    at __webpack_require__ (/test-project/front/build/server/static/development/pages/_app.js:23:31)
    at Module../pages/_app.js (/test-project/front/build/server/static/development/pages/_app.js:3115:77)
    at __webpack_require__ (/test-project/front/build/server/static/development/pages/_app.js:23:31)
    at Object.0 (/test-project/front/build/server/static/development/pages/_app.js:3867:18)
    at __webpack_require__ (/test-project/front/build/server/static/development/pages/_app.js:23:31)
    at /test-project/front/build/server/static/development/pages/_app.js:91:18
    at Object.<anonymous> (/test-project/front/build/server/static/development/pages/_app.js:94:10)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12) name: 'Invariant Violation', framesToPop: 1 }

I'm using Next js (react w/ server-side rendering), but I don't think it's related.

Map does exists on both client and server-side.

I changed to {type: function}, but I would like to use Map.

Any ideas?

Thanks.

lemiesz commented 4 years ago

I have the same issue, it works if I use the type key directly 

const reducer = handleActions(
    new Map([
        [
            INCREMENT,
            (state, action) => ({
                counter: state.counter + action.payload
            })
        ],

However i would like to use the action itself as a key, like how i do with handleAction

lemiesz commented 4 years ago

I figured it out you can do 

const reducer = handleActions(
    new Map([
        [
            `${INCREMENT}`,
            (state, action) => ({
                counter: state.counter + action.payload
            })
        ],