2016-12-27 4 views
0

編集:ソリューションがmapStateToPropsに別の変数を接続していました。Redux - 同一のレデューサー、コンテナ、およびコンポーネントが異なる結果を生成しています

私はreact-reduxアプリケーションにいくつか問題があります。私は何が間違っているのか分かりません。

ソースコードはfound hereです。

アクションとレデューサーが正常に動作しているように見えますが、Duplicateロジックとは異なり、アルファベット順のボタンが切り替わっても用語集は再レンダリングされません。私はこれを店舗に正しく引っ張っていないので、これは推測しています。

私はDuplicateレデューサ、アクション、コンテナ、コンポーネントを作成しました。これらのコードを実行したら、Alphabeticalファイルにコードをコピーしました。変数名の他に、コードは同じでなければなりませんが、それぞれのレデューサーを個別にcreateStoreで実行すると、duplicatesは正しく動作し、alphabeticalは正しく動作しません。

ボタンは、createStore関数でtoggleDuplicatesを使用すると表示されます(私はまだ減速機を組み合わせている理由がわかりません - 多分これは問題に関係していますか?)。 toggleDuplicatesまたは

let store = createStore(
    allReducers, 
    initialState, 
    compose(
     applyMiddleware(createLogger()) 
    ) 
); 

toggleAlphabetical

srcが/ entry.jsx

変更allReducersはnpm run server

意図した動作があり、npm installを実行し、ディレクトリに、CDを実行するにはDuplicateおよびAlphabetizeボタンは、トグル時にGlossaryTableを正しい値で更新します。 visibleWords状態が更新されたときGlossaryTableはtoggleDuplicates/toggleAlphabeticalの減速によって返された後(再レンダリングする必要があります。

のsrc /コンテナ/ GlossaryContainer.js私は私が正しく配線されないかもしれないと思う

これは、派遣への状態まで。

const mapStateToProps = (state) => ({ 
    visibleWords: getVisibleEntries(
     state.words, 
     state.visibleWords, 
     state.toggleDuplicates, 
     state.toggleAlphabetical 
) 
}); 

const VisibleGlossary = connect(
    mapStateToProps 
)(GlossaryTable); 

export default VisibleGlossary; 
+1

店舗を作成するときはinitialStateを避けてください。 – Hosar

答えて

1

あなたが実際に減速が、配列ではありませんwordsと呼ばれる減速機を作成している。

wordsは、店舗内のデータである必要があります。還元剤そのものではありません。

関連する問題