Reactjs：ページリフレッシュでreduxフォームデータを取得/保存する

Question

Reactでは、redux-formを使用してAPIアップデートコールを実行しようとしています。私はinitializeの助けを借りて編集フォームでデータを取り出すことができます。それはうまくいく。ユーザーがブラウザをリフレッシュしない限りその場合、私はinitializeでデータを取得できません。これは、小道具/州では利用できないためです。

constructor(props){ 
    super(props); 
} 

componentWillMount(){ 
    this.props.fetchUser(this.props.params.id); 
} 

render() { 
const InitlValues = { 
    initialValues: { 
    "name": this.props.user.name, 
    "city": this.props.user.city 
    } 
} 
const { handleSubmit } = this.props; 
return(
    <form goes here..> 
); 

私は、データをフェッチするために、ライフサイクルメソッドcomponentWillMount反応してみましたが、動作するようには思えません。

ユーザーがブラウザをリフレッシュすると、それは誤りスロー：

捕捉されない例外TypeErrorを：私は、ユーザーがページをリフレッシュしたときにデータを保存/フェッチ回避する必要がありますどのようにヌル

のプロパティ「name」を読み取ることができませんか？

Answer 1

これは実質的に還元型の問題ではなく、1ページのアプリケーションでリフレッシュしてアプリケーションの状態を維持するのが一般的な問題です。 reduxを使用すると、localStorage（この場合はフォームの状態）に更新する必要がある状態を保存できます。あなたはredux middlewareを作成することによって、「手で」これを行うことができ、または本があります：https://github.com/elgerlambert/redux-localstorage

Answer 2

本当にあなたのクラス/コンポーネントにdefaultPropsを定義する必要がUncaught TypeError: Cannot read property 'name' of nullを避けるためには。まさにここに何が起こる

は、あなたのAPIアクションが非同期であり、データを取得するために時間がかかるため、順番にthis.props.user.nameを作るthis.props.user戻っundefinedがUncaught TypeErrorを投げるということです。

このような何かを試してみてください：

static defaultProps = { 
user: { name: '', city: '' } 
} 

constructor(props){ 
    super(props); 
} 

componentWillMount(){ 
    this.props.fetchUser(this.props.params.id); 
} 

render() { 
const InitlValues = { 
    initialValues: { 
    "name": this.props.user.name, 
    "city": this.props.user.city 
    } 
} 
const { handleSubmit } = this.props; 
return(
    <form goes here..> 
); 

PS：あなたが本当にあなたのReduxの状態を保持したい場合は、ローカルストレージやセッションストレージにあなたの状態の一部を保存するためにReduxのミドルウェアを使用する必要があります。 redux自身の作成者からのミドルウェアの使用に関するその他の情報：Building React Applications with Idiomatic Redux