質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2385閲覧

redux-formのエラーの対処法がわからない

退会済みユーザー

退会済みユーザー

総合スコア0

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/10/06 07:20

OnsenUI,React,Reduxを使ってアプリ開発をしています。
この度redux-formを導入しようと試みたのですが、うまく動作せずエラーが表示されます。

Uncaught Invariant Violation: Could not find "store" in either the context or props of "Connect(Form(p))". Either wrap the root component in a <Provide>, or explicitly pass "store" as a prop to "Connect(Form(p))".

コードの構造の概要は以下のような感じです。
main → Tabbar ─→ Navigator → PageSettingNavi → PageSetting → Setting(connect) → SettingOnsList → OnsenUiのNavigatorでジャンプ → SettingFormContainer → OpinionForm

javascript

1// Action 2export const addCustomer = (customer) => { 3 return { 4 type: actionTypes.ADD_CUSTOMER, 5 customer 6 }; 7} 8 9// Reducer 10const initialState = { 11 customers: [ 12 { code: "10", name: "香川", kana: "カガワ" }, 13 { code: "4", name: "本田", kana: "ホンダ" }, 14 { code: "5", name: "長友", kana: "ナガトモ" }, 15 { code: "9", name: "岡崎", kana: "オカザキ" } 16 ] 17} 18 19const customersReducer = (state = initialState, action) => { 20 switch (action.type) { 21 case actionTypes.ADD_CUSTOMER: 22 return Object.assign({}, state, { 23 customers: [...state.customers, action.customer] 24 }); 25 default: 26 return state; 27 } 28}; 29 30export const rootReducer = combineReducers({ 31 customers: customersReducer, 32 form: formReducer 33}); 34 35// Store 36export default function createFinalStore(){ 37 let store = createStore(alertReducer) 38 return store 39} 40 41// PageSetting.jsx 42import {Page, Toolbar, Navigator} from 'react-onsenui' 43 44export default class PageSettingNavi extends React.Component { 45 renderPage(route, navigator) { 46 const props = route.props || {} 47 props.navigator = navigator 48 49 return React.createElement(route.component, props) 50 } 51 52 render() { 53 return ( 54 <Page> 55 <Navigator 56 initialRoute={{ 57 component: PageSetting, 58 props: {...this.props}, 59 }} 60 renderPage={this.renderPage} 61 /> 62 </Page> 63 ); 64 } 65} 66 67class PageSetting extends React.Component { 68 render() { 69 const store = createFinalStore() 70 return ( 71 <Page> 72 <Provider store={store}> 73 <Setting {...this.props}/> 74 </Provider> 75 </Page> 76 ) 77 } 78} 79 80class Setting extends React.Component { 81 render() { 82 return( 83 <Page 84 renderToolbar={() => 85 <Toolbar modifier="material"> 86 <div className='center'>設定</div> 87 </Toolbar> 88 }> 89 <SettingOnsList {...this.props}/> 90 </Page> 91 ) 92 } 93} 94 95const mapStateToProps = (state) => { 96 return { } 97} 98 99const mapDispatchToProps = (dispatch) => { 100 return{ 101 onSubmit(values){ 102 dispatch(AppActions.addCustomer(values)) 103 } 104 } 105} 106 107export default connect( 108 mapStateToProps, 109 mapDispatchToProps 110)(Setting) 111 112class SettingOnsList extends React.Component { 113 114 renderRow(row, index) { 115 return ( 116 <ListItemChevron key={index}> 117 <div className='left'> 118 <Icon icon="fa-envelope"/> 119 </div> 120 <div className='center list-item-title'>ご意見箱</div> 121 </ListItemChevron> 122 ); 123 } 124 125 pushPage(){ 126 this.props.navigator.pushPage({ 127 component: SettingFormContainer, 128 props: {...this.props}, 129 }) 130 } 131 132 render() { 133 return ( 134 <List 135 onClick={this.pushPage.bind(this)} 136 dataSource={[1]} 137 renderRow={this.renderRow} 138 renderHeader={() => <ListHeader>その他</ListHeader>} 139 /> 140 ) 141 } 142} 143 144class SettingFormContainer extends React.Component { 145 render() { 146 return( 147 <Page 148 renderToolbar={()=> 149 <Toolbar modifier="material"> 150 <div className="left"><BackButton modifier="material"></BackButton></div> 151 <div className="center">Alert</div> 152 </Toolbar> 153 }> 154 {/* <CustomerForm {...this.props}/> */} 155 <OpinionForm {...this.props}/> 156 {/* <div>oooo</div> */} 157 </Page> 158 ) 159 } 160} 161 162let OpinionForm = props => { 163 const { 164 handleSubmit, 165 pristine, 166 reset, 167 submitting 168 } = this.props; 169 return ( 170 <form onSubmit={handleSubmit}> 171 <Field name="code" 172 component={renderField} 173 label="コード"/> 174 <Field name="name" 175 component={renderField} 176 label="名前"/> 177 <Field name="kana" 178 component={renderField} 179 label="カナ"/> 180 <div className="form-group"> 181 <button className="btn btn-primary" 182 type="submit" 183 disabled={submitting}> 184 追加 185 </button> 186 <button className="btn btn-default" 187 type="button" 188 onClick={reset} 189 disabled={submitting || pristine}> 190 クリア 191 </button> 192 </div> 193 </form> 194 ); 195} 196 197export default OpinionForm = reduxForm({ 198 form: "customerForm", 199 validate 200})(OpinionForm);

エラーメッセージなどでいろいろ調べてみたのですが、結局よくわかりませんでした。
OnsenUIとReduxが相性が悪いのか、それともそもそもredux-formの使い方が間違っているのかよくわかっていません。

どなたかわかるかたがいらっしゃればご教示願えませんでしょうか。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

reduxForm({
form: "customerForm",
validate
})(OpinionForm);

この部分をreduxのconnectメソッドでラップするんじゃなかったでしたっけ?遠い記憶で自信はないですが。

投稿2017/10/06 16:23

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問