ホーム>
Reduxとthunkを使用しています。リストコンポーネントがあります
class List extends Component {
render() {
//code
<Aux>
<Button
type="button"
click={() => this.props.addNew(data)}
btnType="add" >
</Button>
click={() => this.props.deleteB(id, type)}
btnType="Delete" >
Delete
click={() => this.props.editStart(id)}
btnType="edit" >
click={() => this.props.editSave(data, type)}
btnType="save" >
)
const mapStateToProps = state => {
return {
};
const mapDispatchtoProps = dispatch => {
deleteB: (id, type) => {dispatch(actions.deleteB(id, type))},
editStart: (id) => {dispatch(actions.editStart(id))},
editSave: (data, type) => {dispatch(actions.editSave(data, type))},
addNew: (data) => dispatch(actions.addNew(data))
レデューサー
const addNew = ( state, action ) => {
//immutable state
//add new
//return updated state
const deleteB = ( state, action ) => {
//delete
const editStart = ( state, action ) => {
//update editing to true
const editSave = ( state, action ) => {
if(action.type === state.editing.type) {
//update object with user data
} else {
//delete old data same code of deleteB
//add data user like addNew
const reducer = ( state = initialState, action ) => {
//switch case
export default reducer;
データのタイプが変更された場合、ユーザーが「保存」ボタンをクリックすると、リデューサーは「追加」および「削除」ボタンが使用するのと同じ機能を使用します。 データを削除および追加するためのユーティリティ関数を作成しましたが、それでも見苦しくなります。
ユーザーが「保存」をクリックしたときに、「addNew」と「deleteB」を呼び出すListコンポーネントの関数を呼び出し、最後に「editSave」を呼び出して「editing」状態の状態のみを更新する方が良いのではないかと思いましたプロパティ。
リデューサーは、更新する必要がある状態のみを知る必要があると思うので、editSaveは状態の編集スライスのみを更新し、他のリデューサーを再利用する必要があります。 しかし、より良い方法があるかどうか、またはレデューサーに悪いパターンを書いたかどうかはわかりません。
解決した方法 # 1
### 関連記事
- html - リンクと同様にボタンクリックが機能しない
- r - MOdalの[閉じる]をクリックしたときのレストボタン
- html - Javascript：ページの読み込み時にボタンを自動クリック
- javascript - 1つのdivを表示および非表示にし、CSSの問題を使用してボタンクリックの時間を追加する
- html - 関数をボタンのクリックにリンクするJavascript
- angular - ボタンクリックで新しい機能を追加する方法
- c# - アプリケーションを開き、プログラムでそのアプリケーションのボタンをクリックします
- javascript - ボタンをクリックした後にアクティブになるsetTimeoutループを停止します
- java - ボタンのクリック時に配列内の色をランダム化する
- Selenium（Python）をクリックして[カートに追加]ボタンが機能しない！上下に検索しても何も見つからない
- php - Ajaxでデータを自動ロードする方法クリックボタンに変更する方法
- javascript - 値でボタンを選択してクリックします
- ボタンクリックでファイルC#ASPnetに書き込む
- selenium - Pythonでページを継続的にスクラップするために下にスクロールしてボタンをクリックする方法
- web scraping - URLからボタンクリックをトリガーする
- javascript - ボタンクリックで角度4でdivをスクロール
- tkinterを使用してクリック時に各ボタンに異なる画像を表示させる方法（python）
- jquery - ボタンをクリックしてインターバル時間を変更するJavascript
- vb.net - Sendkeyssendがボタンクリックで機能しない
- node.js - net nodejsモジュールを使用してボタンをクリックするとソケットサーバーに接続します
これは避けます。理想的には、すべてのロジックは、コンポーネントではなく、レデューサーまたはサンクのいずれかに存在する必要があります。このように、ロジックは1か所にあり、簡単かつ均一にテストでき、UIの再実装（つまり、コンポーネントの変更、UIライブラリの置き換えなど）の影響を受けません。
リデューサーは単なる関数です。古い状態とアクションを取り、新しい状態を返します。その基本原則に従う限り、あなたは大丈夫です。別の減速機から減速機を呼び出すと、事実上減速機を作成するだけです。 -Reduxの奇妙な概念ではありません。したがって、次のようなものを用意するのは奇妙なことではありません。
追加ボーナスとして、
someWeirdCaseOfAddEditDeleteが来るとき あなたの通常の
addから逸脱し始めます 、
editおよび
delete、他の3つの減速機と干渉することなく、その実装とテストを簡単に置き換えることができます。
コメントで懸念に対処するには：
dispatchを呼び出す 減速機にはアンチパターンがあります。ただし、関数の構成（つまり、リデューサーを状態の特定の部分を処理するサブ関数に分割する）はまったく問題ありません。
一般的な操作がレデューサーであるという仮定を外すことで、アイデアを頭で包む方が簡単かもしれません。単なる一般的なユーティリティ関数と考えてください：
すべてのレデューサーが新しい状態をReduxに返す前に状態が更新される場合、コードに何らかの問題があります。
Reduxは、すべてのレデューサーを通過した後にのみ更新された状態を受け取ります。実行がまだリデューサーにある間、状態は更新されません。
ボンネットの下で、非常に基本的に、Reduxは次のようなことを行います。