<template><div><b-list-groupv-for="item in items":key="item.id"><qiita-item:item="item"/></b-list-group></div></template><script>importItemfrom"./Item.vue";exportdefault{name:"Content",components:{"qiita-item":Item},computed:{items(){returnthis.$store.getters.items.filter(item=>!item.private);}}};</script>
src/components/Item.vue
<template><b-list-group-item><div><b-link:href="item.url"target="_blank">{{item.title}}</b-link><small>{{updateAt}}</small></div><div><spanv-for="tag in item.tags":key="tag.name"><b-badgevariant="info"pill>{{tag.name}}</b-badge></span></div><div><small:id="userName">{{`by ${userName}`}}</small>
</div>
</b-list-group-item>
</template>
<script>exportdefault{name:"Item",props:{item:{url:String,title:String,updated_at:String,tags:Array,user:{name:String,id:String}}},computed:{updateAt(){constdate=newDate(this.item.updated_at);return` (最終更新日: ${date.toLocaleDateString()})`;},userName(){returnthis.item.user.name||`@${this.item.user.id}`;}}};</script>
redux-formでは、decorated form component(wrapped component)のform stateを初期化するために、initialValuesを用います。initialValuesは、例えばサーバから取得した値を、React Redux の connect()を使って、mapStateToPropsでRedux state をinitialValues propに変換して、decorated form componentに渡すようにします。
initialValuesでformを初期化できるのは、デフォルトで1回のみです。
decorated form componentはreset() propを受け取りますが、reset()を実行することでformをinitialValuesに戻すことができます。
以下が、reducerとaction creatorのソースです。
src/account.js
// Quack! This is a duck. https://github.com/erikras/ducks-modular-reduxconstLOAD='redux-form-examples/account/LOAD'constreducer=(state={},action)=>{switch(action.type){caseLOAD:return{data:action.data}default:returnstate}}/**
* Simulates data loaded into this reducer from somewhere
*/exportconstload=data=>({type:LOAD,data})exportdefaultreducer
以下がredux-formのサンプルです。ポイントの説明を下にまとめてあります。
src/InitializeFromStateForm.js
importReactfrom'react'import{connect}from'react-redux'import{Field,reduxForm}from'redux-form'import{loadasloadAccount}from'./account'constdata={// used to populate "account" reducer when "Load" is clickedfirstName:'Jane',lastName:'Doe',age:'42',anniversaryDate:'2018-08-22',sex:'female',employed:true,favoriteColor:'Blue',bio:'Born to write amazing Redux code.'}constcolors=['Red','Orange','Yellow','Green','Blue','Indigo','Violet']letInitializeFromStateForm=props=>{const{handleSubmit,load,pristine,reset,submitting}=propsreturn(<formonSubmit={handleSubmit}><div><buttontype="button"onClick={()=>load(data)}>
Load Account
</button></div><div><label>First Name</label><div><Fieldname="firstName"component="input"type="text"placeholder="First Name"/></div></div><div><label>Last Name</label><div><Fieldname="lastName"component="input"type="text"placeholder="Last Name"/></div></div><div><label>Age</label><div><Fieldname="age"component="input"type="number"placeholder="Age"/></div></div><div><label>Anniversary Date</label><div><Fieldname="anniversaryDate"component="input"type="date"/></div></div><div><label>Sex</label><div><label><Fieldname="sex"component="input"type="radio"value="male"/>{' '}
Male
</label><label><Fieldname="sex"component="input"type="radio"value="female"/>{' '}
Female
</label></div></div><div><label>Favorite Color</label><div><Fieldname="favoriteColor"component="select"><optionvalue="">Select a color...</option>{colors.map(colorOption=>(<optionvalue={colorOption}key={colorOption}>{colorOption}</option>))}</Field></div></div><div><labelhtmlFor="employed">Employed</label><div><Fieldname="employed"id="employed"component="input"type="checkbox"/></div></div><div><label>Bio</label><div><Fieldname="bio"component="textarea"/></div></div><div><buttontype="submit"disabled={pristine||submitting}>
Submit
</button><buttontype="button"disabled={pristine||submitting}onClick={reset}>
Undo Changes
</button></div></form>)}// Decorate with reduxForm(). It will read the initialValues prop provided by connect()InitializeFromStateForm=reduxForm({form:'initializeFromState'// a unique identifier for this form})(InitializeFromStateForm)// You have to connect() to any reducers that you wish to connect to yourselfInitializeFromStateForm=connect(state=>({initialValues:state.account.data// pull initial values from account reducer}),{load:loadAccount}// bind account loading action creator)(InitializeFromStateForm)exportdefaultInitializeFromStateForm
importReactfrom'react'importReactDOMfrom'react-dom'import{Provider}from'react-redux'import{createStore,combineReducers}from'redux'import{reducerasreduxFormReducer}from'redux-form'importaccountfrom'./account'constdest=document.getElementById('content')constreducer=combineReducers({account,form:reduxFormReducer// mounted under "form"})conststore=createStore(reducer)constshowResults=values=>newPromise(resolve=>{setTimeout(()=>{// simulate server latencywindow.alert(`You submitted:\n\n${JSON.stringify(values,null,2)}`)resolve()},500)})letrender=()=>{constInitializeFromStateForm=require('./InitializeFromStateForm').defaultReactDOM.hydrate(<Providerstore={store}><h2>Form</h2><InitializeFromStateFormonSubmit={showResults}/></Provider>,dest)}render()
!
