gajus/redux-immutable-examples

A complete application showing use of redux-immutable.

redux-immutable examples

This app demonstrates:

• How to use redux-immutable combineReducers.
• How to make a reducer using Immutable data.
• How to make a selector using Immutable data.
• How to use middleware.
• How to use react-hot-reload.

To launch the app:

git clone [email protected]:gajus/redux-immutable-examples.git
cd ./redux-immutable-examples
npm install
npm start

redux-immutable-examples's Issues

npm start problem

hi, i am new to redux, and I am trying to run your examples, when I just run 'npm start', I got the errors below, my node.js is 6.10.0 , can u help me with that ? Thanks : )

events.js:160
throw er; // Unhandled 'error' event
^

Error: listen EADDRNOTAVAIL 172.18.243.90:8000
at Object.exports._errnoException (util.js:1022:11)
at exports._exceptionWithHostPort (util.js:1045:20)
at Server._listen2 (net.js:1246:19)
at listen (net.js:1295:10)
at net.js:1405:9
at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)

__dirname + '/src/endpoint/static'

Please, use path.join.

A way to reduce actions boilerplate

Here's the current actions boilerplate:

taskAdd = (name) => ({
    name: 'TASK_ADD',
    data: {
        name
    }
});

taskDone = (id) => ({
    name: 'TASK_DONE',
    data: {
        id
    }
});

It suffers from these problems:

1. Repetitive typing where you repeat name and data for each action and then also repeat the list of parameters, twice for each action.
2. Action names are not defined as reusable/importable constants (therefore you can't enforce compile-time checks on them).
3. (Minor) For some reason you're not using const but instead let the variables at top of the file. I guess it's some legacy/habit issue?

Have you given any thought on these problems before? I like the CRC/CCA approach in general but applying it directly means sacrificing the above. For example, with redux-actions I can:

// Identity action creator, no boilerplate at all, clean and DRY.
export const chatMessageSent = createAction('CHAT_MESSAGE_SENT');

and then (in a redux saga):

import {chatMessageSent} from '.../actions'

yield takeEvery(chatMessageSent.toString(), function* ({payload: {contact, text}}) {
    // ...
});

and I get no headache about possible typos in the action names.

Of course I can come up with a poor man ad-hoc shortcut, something like:

function createAction(name) {
    const action = (data, metadata) => ({name, data, metadata});
    action.name = name;
    return action;
}
...
chatMessageSent = createAction('CHAT_MESSAGE_SENT');
...
yield takeEvery(chatMessageSent.name, function* ({data: {contact, text}}) {
    // ...
});

but a proper well-thought library when you still can override the action creator logic, specify list of fields etc. would be better.

And then again, in redux-immutable you need to use these ALL_CAPS constants (which you can't import!) as the key names in reducers, while in redux-actions they provide a handy shortcut with compile-time check (something your combineReducers could also benefit from):

const reducer = handleActions({
    [selectContact]: (state, {payload: {id}}) => ({
        ...state,
        selectedId: id
    }),

I know this is not a proper ticket and more of a rant, but anyway. 🙃

Example is outdated and crashes with redux-immutable 3.0.8

The example uses redux-immutable 1.3.2.

With the latest redux-immutable 3.0.8, it crashes with Uncaught TypeError: reducer is not a function(…) at combineReducers.js line 37.

webpack-dev-server does not start a server

The command 'webpack-dev-server' isn't firing the server up.