[Redux] redux toolkit - createAction

1.概念

Reduxが特定の機能を提供するパッケージ
Reduxコードで繰り返される関数作成、スイッチ分岐処理などは、Reduxが提供するパッケージ(ライブラリ)であり、重複度を低減し、コードを簡略化するために使用されます.

2-1. createAction

actionを渡すときにオブジェクトを渡すか、構造を個別の関数で渡します.
単純なaction関数宣言のみで実現される機能

関数宣言およびタイプインスタント宣言

import {createStore} from 'redux'
const ADD = "ADD"
const DELETE = "DELETE"
const addFunc = text => {
    return {
        type : ADD,
        text : text,
        id : Date.now()
    }
}
const deleteFunc = id => {
    return {
        type : DELETE,
        id : id
    }
}

createActionによりtypeを直接宣言し,コードを最初に簡略化することができる.

const addFunc = createAction("ADD")

const deleteFunc = createAction("DELETE")

const reducer = (state=[], action) => {
    switch(action.type){
        case addFunc.type:
            return [...state, {text : action.text, id : action.id}]
        case deleteFunc.type:
            return state.filter(deletedList => deletedList.id !== action.id)
        default : 
            return state
    }
}

上記のコードのように、createActionで関数を宣言し、タイプを宣言してcase文に適用することで、コードを簡潔に記述できます.
すべてのデータが有効負荷に一括して格納されます
上記で新しく定義したaddFunc、deleteFuncセクションのみが修復されると、論理は正常に動作しません.

createActiontoolkitを使用する場合は、データの受信方法も変更する必要があります.

function Home({doList, addFunc}) {
    //console.log(props)
    const [text, setText] = useState("")
    function onChange(e) {
        setText(e.target.value)
    }

    function onSubmit(e){
        e.preventDefault()
        addFunc(text) //call dispatch logic by specific function
        setText("")
    }

    return(
    <div>
        <h1>TO DO LIST</h1>
        <form onSubmit={onSubmit}>
        <input type="text" value = {text} onChange={onChange}/>
        <button>LIST ADD</button>
        </form>
        <ul>{doList.map(doListToView => <Dolistview key={doListToView.id} {...doListToView} />)}</ul>
    </div>
    )
}

function mapStateToProps(state) {
    //console.log(state, ownProps)
    return {doList : state}
}

function mapDispatchToProps(dispatch){
    return {
        addFunc : (text) => dispatch(actionTrigger.addFunc(text))
        //you can only use dispatch(action) structure, when you give dispatch with action aruguments.
    }
}

export default connect(mapStateToProps, mapDispatchToProps) (Home)

ホーム画面に文字列を入力し、LIST ADDボタン(またはEnterkey)をクリックすると、テキストに格納されている内容がaddFuncパラメータに渡され、dispatchが再起動するように入力されます.
このような従来方式では、addFuncを介して伝達される{type:~,text:~}オブジェクト、すなわち、直接伝達されるtext値がないことに注意が必要である.
CreateActionを使用して、自分が受け取ったパラメータの一括をペイロードに格納します.

const reducer = (state=[], action) => {
    switch(action.type){
        case addFunc.type:
            return [...state, {text : action.payload, id : action.id}]
        case deleteFunc.type:
            return state.filter(deletedList => deletedList.id !== action.id)
        default : 
            return state
    }
}

submitイベント実行時

イベントの実行時にaddFuncが呼び出されます.

を呼び出してテキストパラメータを伝達し、最終的にdispatchを介して動作パラメータを伝達する.

dispatchを介して渡されるアクションパラメータがcreateActionとして定義されている場合は、payloadというリポジトリで一括保存および呼び出しを行う必要があります.

 case addFunc.type:
            return [...state, {text : action.payload, id : action.id}]

※注意)list addの場合、state配列にオブジェクトが追加され、新しいオブジェクトが返されます.
すなわち,関数の戻り形式をオブジェクトに設定せず,actionのペイロードからデータを受信するだけでよい.

switch(action.type){
        case addFunc.type:
            console.log(action)
            return [...state, {text : action.payload, id : Date.now()}]
        case deleteFunc.type:
            return state.filter(deletedList => deletedList.id !== action.payload)
        default : 
            return state
    }

同様の原理でid値も同様に適用される.
※注意)createAction dispatchのactionで返された全てのデータはペイロードに格納されます
上記のコードからリストを削除するdeletefuncの構造を見てみましょう.

function mapDispatchToProps(dispatch, ownProps){
    //console.log(ownProps)
    
    return {
        
        deleteFunc : () => dispatch(actionTrigger.deleteFunc(ownProps.id))
        //you can only use dispatch(action) structure, when you give dispatch with action aruguments.
    }
}

削除すると同時に、割り当て時にcreateActionに保存したパラメータ値idがペイロードに保存されます(※状態配列は別ですが、dispatchで動作が伝わる時間を確認する必要があります).

case deleteFunc.type:
            return state.filter(deletedList => deletedList.id !== action.payload)

したがって,id値actionは同じ原理を用いて行う.idではありませんaction.ペイロードに変更します.

2-2. (参照)

ログ出力createActionとして宣言された関数.

console.ログ(addFunc、deleteFunc)→関数を表します.

console.ログ(addFunc()、deleteFunc()→関数内部にtypeが宣言され、ペイロードも埋め込まれています.

ペイロードは状態そのものではなく,送信時に伝達されるパラメータを格納する場所である.

dispatchでは、関数に渡されるパラメータがペイロードに格納されます.

ペイロードは、現在の記憶状態とは異なり、スケジューリングポイントで伝達されるパラメータである.

2-3. リファレンスリンク

redoxtoolkitに関する正式なドキュメント
https://redux-toolkit.js.org/introduction/getting-started
続行