twice dispatch an async action creator with different params

[dontlemmedown]

i'm pretty sure that is my mistake, but...

for example:

I have 2 dummy Root, TopicPage, and one dumb Header which render received data as navigation.

@connect(state => ({ topics: state.topics }))

export default class Root extends Component {

    static propTypes = {
        dispatch: PropTypes.func.isRequired,
        topics: PropTypes.object.isRequired
    }

    componentDidMount() {
        this.props.dispatch(fetchTopics('defaults'));
    }

    render() {
        return (
            <Header props={ this.props.topics }></Header>
            // for example TopicPage
            { this.props.children }
        );
    }
}

@connect(state => ({ images: state.topics }))

export default class TopicPage extends Component {

    static propTypes = {
        dispatch: PropTypes.func.isRequired,
        images: PropTypes.object.isRequired
    }

    componentDidMount() {
        this.props.dispatch(fetchTopics(this.props.params.id));
    }

    render() {
        return (
            <div>{ this.props.images.data.map(item => 
                <p key={ item.id }>{ item.id }</p>) }
            </div>
        );
    }

But data in Root and TopicPage the same and receive it as random...
https://www.youtube.com/watch?v=_hSRKY-5efo&feature=youtu.be

Sorry for my English and low skill, and for leave the question here, I couldn't ask it on stack overflow..

[wmertens]

Your selector is the same so the data is the same. I don't understand your
question I think.

Why could you not ask on stackoverflow?

[gaearon]

Please provide the whole project source code, a list of steps to reproduce the issue, the expected, and the actual result.

[dontlemmedown]

@wmertens Because, I should to wait for a 2 days to ask a question...

project source code: https://github.com/dontlemmedown/isomorphic

a list of steps to reproduce the issue

if I got you correctly, then

• npm run dev
• open localhost:3000
• click to a link in a header
• refresh the page a few times (to see result)

I want to receive different data in headers (navigation) and TopicPage from fetchTopics action creator. But now, when I dispatch the action fetchTopics('defaults') in Root component and send the data to Header its ok, but when I dispatch it again fetchTopics(params.id) in TopicPage component (a child of Root) then result is randomly receiving data in Header and TopicPage...

Hope you got my meaning and English as well =)

[wmertens]

The problem is with your reducer. You're using splats to merge, but they
only do a shallow merge.

https://github.com/dontlemmedown/isomorphic/blob/master/src/reducers/topics.js#L17

I think you want

return { ...state, isFetching: false, data: {state.data, ...action.response.
data }};

(not tested)

[wmertens]

BTW, with redux-devtools you would have seen this :)

[dontlemmedown]

@wmertens, it didnt works, cuz there's an error data: {state.data, ...action.response. data } and most importantly for me - i dont get how to should it work :(

Thanks, redux-devtools, I'll try to use this to get solution =)

[wmertens]

Oops that should have been
return { ...state, isFetching: false, data: {...state.data,
...action.response.data }};

[dontlemmedown]

@wmertens, thanks for trying to help me and I apologize for molestation, but could you explain me - how should it work, because I've got the same problem

https://github.com/dontlemmedown/isomorphic/commit/9bbe5a9bad54b5602cb7eec83cbf33f6b2ac2bb8

this is console.log of localhost:3000/topics/11

FROM HEADER: Object { isFetching: false, data: Array[0] 
FROM TOPICPAGE: Object { isFetching: false, data: Array[0] }

FROM HEADER: Object { isFetching: true, data: Array[0] }
FROM TOPICPAGE: Object { isFetching: true, data: Array[0] }

FROM TOPICPAGE: Object { isFetching: false, data: Object[9] }
FROM TOPICPAGE: Object { isFetching: false, data: Object[60] }

probably the best way to use 2 action creators?

[gaearon]

I'll close this, as we're starting to adopt the policy of not allowing questions in issues (#838).
Please feel free to ask this on StackOverflow or other QA resources.