reduxのmapStateToPropsとmapDispatchToPropsを同名のキーでネストする方法

Question

お世話になっております。

現在、 reduxを学習している最中です。
containersに書くmapStateToPropsとmapDispatchToPropsについて、 この2つの中身を同名のキーでネストしたいのですが、 おそらくmapDispatchToPropsに上書きされているようで、 mapStateToPropsの値が消えてしまいます。

以下のような感じにしたいのですが、 何か方法をご存知の方はいらっしゃいませんでしょうか;;
Providerのstoreに{ { store: store } }みたいに渡したりもしたのですが、 エラーに怒られました。

const mapStateToProps = state => ({
  store: {
    state: {
      items: state.items
    }
  }
})

const mapDispatchToProps = dispatch => ({
  store: {
    dispatch: {
      items: {
        add: text => dispatch(Items.add(text))
      } 
    }
  }
})

⇣ こんな感じで呼び出したいです。

// state
this.props.store.state.items

// dispatch
this.props.store.dispatch.items.add('aiueo')

Answer 1

こんにちは

mapStateToProps と mapDispatchToProps は以下

const mapStateToProps = state => ({
  items: state.items
})

const mapDispatchToProps = dispatch => ({
　items: {
    add: text => dispatch(Items.add(text))
  }
})

のように、ネストさせないで書いておき、以下の mergeProps

const mergeProps = (stateProps, dispatchProps) => {
  return  {
    store: {
      state: stateProps,
      dispatch: dispatchProps
    }
  }
}

を、connect の第３引数として渡せばよいかと思います。

例えば、App コンポーネントに connect させるのであれば、以下です。

export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(App)

• 参考： github react-redux - connect() - mergeProps

以上、参考になれば幸いです。

Comments

[Newbi]

ありがとうございます！！
mergePropsの使い方がよく分かってなかったのですが、 この使い方と公式を読み直してようやく分かってきました！

他にもいくつか分からないところがあるので、 公式をしっかり読み直したいと思います！

[jun68ykt]

どういたしまして。
> ようやく分かってきました！
とのことで、よかったです ????