subscribe directly to actions

[flying-sheep]

hi, i have impure components with a checkbox to expand their contents, as well as an action to expand them all (as if clicked on each checkbox separately)

do i have to track all their states manually or is there a good way to subscribe to that action?

[timjacobi]

Could you please provide an example so it's easier to reason about your question?

[gaearon]

Please see

reduxjs/redux#1057
reduxjs/redux#347
reduxjs/redux#580
reduxjs/redux#1091
reduxjs/redux#622

[flying-sheep]

OK, so how would you do map the following to the paradigm?

const expandAll = ... (?)

class Expandable {
    state = { expanded: false }
    @autobind
    toggleExpand(e) { this.setState({ expanded: !this.state.expanded }) }
    render() { return (
        <li>
            <input type="checkbox" checked={this.state.expanded} onClick={this.toggleExpand}>
            {this.state.expanded ? this.props.foo : '…'}
        </li>
    ) }
}

class App {
    render() { return (
        <main>
            <button onClick={expandAll}>Expand all</button>
            <ol>
                {this.props.bar.map(foo => <Expandable foo={foo}/>)}
            </ol>
        </main>
    ) }
}

[gaearon]

How is this related to Redux? You seem to be using React component state, not Redux.

[flying-sheep]

i use it elsewhere and all other actions apart from expandAll use and work with redux.

alternatively i’d kinda have to store the expansion state of all Expandables in the store state, but that’d get ugly due to App.props.bar being able to be replaced (so i’d need to sync that prop with the expansion state)

[gaearon]

I'd say leave it to React. The React approach would be to keep the toggled state of all components inside their shared parent (App) I guess and have Expandable receive expanded and toggle as props. Then expandAll would change the state of App to toggle all individual state entries. No need for Redux here IMO.

[flying-sheep]

hmm, makes sense. would be simpler to just subscribe each Expandable to a global action, though.

thanks!

[gaearon]

"Subscribing to action" breaks ideas of Redux because it makes your UI dependant on global event bus rather than current state. You can totally do that if you want, but it's not Redux. 😉

You can give IDs to expandables and keep something like { expandableState: { 0: false, 1: false, 2: true } } in your Redux state. Then you'd be able to fire different actions and read state from Redux store.