Proposal: Component level state reducer

I understand component level state has be discussed quite in-depth here but I was wondering if this proposed API might be considered. It’s probably a little too messy with the underlying implementation having to create unique ID’s for each component and be the same ID every time (for time travel etc.) but worth the discussion I feel (and as the CONTRIBUTING.md says to discuss before wasting my time implementing).

What I’m proposing is adding another argument to the connect function that allows you to specify a reducer for the component’s state. This state would then be accessed via a state prop (or another more appropriate name if that identifier is already taken).

Example:

import React, { Component } from "react";
import { connect } from "react-redux";

class Login extends Component {
    render() {
        const { state } = this.props;

        if(state.error) {
            // Error like "Invalid credentials"
            return <p>{ state.error.message }</p>
        }

        return //...form
    }
}

const componentReducer = (state = {}, action) => {
    switch action.type {
        case "USER_LOGIN_FAILURE": // Listen to any actions
            // Set the `error` key in the component's state
            return { error: action.error }

        default:
            return state;
    }
}

export default connect(mapStateToProps, actions, componentReducer)(Login)

Problems

• ID’s for components need to be generated in a deterministic way (hash the global state and component index?).
• Dispatching actions that are intended for only one component would require some sort of instance of ID comparison. For example, you couldn’t just dispatch a DROPDOWN_SELECT because all dropdowns mounted would then have the same selection.

[lucasconstantino]

Came up with something easy here:

import { connect } from 'react-redux'
import { compose, withProps } from 'recompose'
import { createAction } from 'redux-actions'

export const WITH_REDUCER = 'withReducer/WITH_REDUCER'
export const withReducerAction = createAction(WITH_REDUCER)

export const withReducer = reducers => compose(
  connect(),
  withProps(props => Object.keys(reducers).reduce(
    (newProps, name) => ({
      ...newProps,
      [name]: payload => props.dispatch(withReducerAction({
        reducer: reducers[name],
        payload,
        props,
      }))
    }), {}
  ))
)

export default (state, { type, payload: { reducer, props, payload } }) =>
  type === WITH_REDUCER ? reducer(props)(state, { type, payload }) : state

Add the exported reducer to the store, and use the helper as such:

const Comp = ({ myComponentReducer, state }) => (
  <div>
    <p>{ state }</p>
    <input type="text" onChange={ (e) => myComponentReducer(e.value) } />
  </div>
)

const myComponentReducer = props => (state, { payload }) => payload

export default compose(
  connect(state => ({ state })),
  withReducer({ myComponentReducer })
)(Comp)

Quite nice… I’ll make a module soon.

[Wroud]

published a package https://github.com/Wroud/redux-subreducer