redux-form getFormState副作用

Question

私のアプリにはたくさんのフォームがあります。私は親還元剤の下でそれぞれのための単一のフォーム還元剤を作り、それらを組み合わせた。私はgetFormStateを使用している彼らのデータをフェッチするために、すべてがフォームの状態側をフェッチするには大丈夫ですが、すべての還元型のレデューサーで複製された状態のアクティブなフォームです！ 各redux-formアクションは、すべてのフォームに適用されます。

私は全体的な状況を提示できることをあなたと一緒にすべてのコードを共有することができるのか分かりません。私は、ところで、ここでいくつかのコードを共有してみてください。

これは私のサインアップフォームです：

SigninForm = reduxForm({ 
    form: 'signin', 
    validate, 
    getFormState: ({ auth }) => auth.signin.form 
})(SigninForm) 

サインアップ減速

import { combineReducers } from 'redux' 
import { reducer as reduxFormReducer } from 'redux-form' 

const signin = combineReducers({ 
    error, 
    isLogging, 
    form: reduxFormReducer 
}) 

export default signin 

とフィルタの形式：

export default compose(
    connect(null, { ...actions }), 
    reduxForm({ 
    form: 'filters', 
    destroyOnUnmount: false, 
    initialValues: { 
     pool: 'either', 
     open_house: false, 
     listing_statuses: { 
     ...activeStatuses 
     }, 
     property_subtypes, 
     minimum_sold_date: '3', // unit is month but it need to timestamp 
     minimum_bedrooms: 'any', 
     minimum_bathrooms: 'any', 
     minimum_parking_spaces: 'any' 
    }, 
    getFormState: ({ search }) => search.filters.form 
    }), 
    withHandlers({ 
    onSubmitHandler: ({ submitFiltersForm }) => values => { 
     submitFiltersForm(values) 
    } 
    }) 
)(Filters) 

と私のルートを減速機：

const appReducer = combineReducers({ 
    socket, 
    user, 
    auth, 
    brand, 
    search, 
    routing: routerReducer, 
    listing: createNamedWrapperReducer(listing, 'LISTING') 
}) 

export default (state, action) => appReducer(state, action) 

P.S：ルートレデューサーの単体レデューサーを使用せずに使用すると、すべてがうまく機能します。getFormState

OS: Mac, node: 8.3.0, react: 15.4.2, redux: 3.6.0, redux-form: 7.0.0, browser: 60.0.3112.101 (Official Build) (64-bit)

Answer 1

これは他の何よりもReduxの問題です。

Reduxで、すべてレデューサーを受け取ります。すべてアクション。
これは、奇妙なビジネスアイデアに簡単に対応できるアーキテクチャ上の決定です。すべてのあなたのコードベースを中心にReduxの形式の減速を複製している場合、アクションタイプがすべてのフォームでも同じですので、

したがって、あなたはまた、すべてフォームの状態を複製しています。

getFormStateオプションは、レデューサーの複数のインスタンスを回避するためのものではありません。ルートレベルのformキーを使用できない場合は、あなたの還元フォームの状態をどこかに置くことを意味します。

したがって、解決策は、質問で言うことを行い、アプリケーション全体で単一のフォームレデューサーを使用することです。

Answer 2

私が理解から、あなたは（私が間違っているなら、私を修正）適切Reduxの形式を使用しないでください。 getting startedから

：

フォームリデューサー

あなたは一度だけそれを 渡すために持っているのでそれは、あなたのフォームコンポーネントのすべてのために働きます。

Reduxの形式は、アプリケーション全体の状態で一つだけReduxの形式の減速があることを前提としています。言い換えれば、フォームレデューサーはネストされてはならない。

docsからコンポーネント

SigninForm = reduxForm({ 
    form: 'signin', 
    validate, 
    getFormState: ({ form }) => form // <-- you don't need to use this line now 
})(SigninForm) 

に、この

import { reducer as reduxFormReducer } from 'redux-form' 
... 
const appReducer = combineReducers({ 
    socket, 
    user, 
    auth, 
    brand, 
    search, 
    routing: routerReducer, 
    listing: createNamedWrapperReducer(listing, 'LISTING'), 
    form: reduxFormReducer // <-- that's all there is to it 
}) 

export default (state, action) => appReducer(state, action) 

をこの

const signin = combineReducers({ 
    error, 
    isLogging, 
    form: reduxFormReducer // <-- delete this line 
}) 

を削除し、追加します。

getFormState：[オプション]機能

全体Reduxの状態をとり、Reduxの形式の減速機を搭載した場合に相当する状態 スライスを返す関数。 この機能はほとんど必要ありません。デフォルトでは、 レデューサーがフォームキーの下にマウントされていることを前提としています。

formReducerをフォームキーの下に搭載しているので、getFormStateはまったく必要ありません。