demo-react-redux-form-immutability.md

Getting Started

git clone https://gist.github.com/841ccaccb8efcdafa3b7.git playground
cd playground
npm install
npm start

Then point your browser at http://localhost:3000

Screenshot

.gitignore

node_modules/

index.js

import createLogger from 'redux-logger';
import PureComponent from 'react-pure-render/component';
import React from 'react';
import ReactDOM from 'react-dom';
import { connect, Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware, compose, bindActionCreators } from 'redux';
import { createModelReducer, createFormReducer, Field, actions } from 'react-redux-form';
import thunk from 'redux-thunk';
import './style.css';

/**
 * Reducers / Store
 */

const reducers = combineReducers({
  user: createModelReducer('user', {
    name: '',
    hobbies: { piano: false, surfing: false },
    phones: [],
  }),
  userForm: createFormReducer('user')
});

const finalCreateStore = compose(
  applyMiddleware(thunk, createLogger({ collapsed: true }))
)(createStore);

function configureStore(initialState) {
  const store = finalCreateStore(reducers, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./index.js', () => {
      const nextRootReducer = reducers;
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

/**
 * Components
 */

class JSONDump extends PureComponent {
  constructor(props) {
    super(props);
    this._conuter = 1;
  }
  componentDidUpdate() {
    ++this._conuter;
  }
  render() {
    const { value } = this.props;

    return (
      <div className="code">
        <span>({ this._conuter })</span>
        <pre>{ JSON.stringify(value, null, 2) }</pre>
      </div>
    );
  }
}

class Presentational extends PureComponent {
  render() {
    const { index, user, userForm, dispatch } = this.props;

    return (
      <div>
        <h2>Demo</h2>

        <div>
          <Field model="user.name">
            <label>name: </label>
            <input type="text" />
          </Field>
          <JSONDump value={ user.name } />
        </div>

        <div>
          <Field model="user.hobbies.piano">
            <label>hobbies.piano</label>
            <input type="checkbox" />
          </Field>
          <JSONDump value={ user.hobbies.piano } />
        </div>

        <div>
          <Field model="user.hobbies.surfing">
            <label>hobbies.surfing</label>
            <input type="checkbox" />
          </Field>
          <JSONDump value={ user.hobbies.surfing } />
        </div>

        <div>
          phones: <button onClick={ () => dispatch(actions.push('user.phones', Math.random()))}>+</button>
          <JSONDump value={ user.phones } />
        </div>
      </div>
    );
  }
}

const Container = connect(
  state => ({
    user: state.user,
    userForm: state.userForm,
  })
)(Presentational);

/**
 * Entry Point
 */

const store = configureStore();

ReactDOM.render(
  <Provider store={ store }>
    <Container />
  </Provider>,
  document.querySelector('#app')
);

package.json

{
  "name": "simple-react",
  "dependencies": {
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-pure-render": "^1.0.2",
    "react-redux": "^4.0.6",
    "redux": "^3.0.6",
    "redux-logger": "^2.4.0",
    "redux-thunk": "^1.0.3"
  },
  "scripts": {
    "start": "heatpack index.js"
  },
  "devDependencies": {
    "react-heatpack": "^3.0.1"
  }
}

screenshot.gif

style.css

.code > span {
  margin-right: 4px;
}

.code > pre {
  display: inline-block;
}