SNSの作成(3)-reduxのバインド

reduceをプロジェクトに関連付ける場合、コード量が大きすぎるため、生産性が低下することが多い.
nextでは、reduceを簡単にバインドできるライブラリがあります.next-redux-wrapperという名前のライブラリ.
(ちなみに、一般的な李徳思とは少し違います)
providerを最上位コンポーネントに書き込む必要はありません.
冗長性を使用して画面をビジネスロジックから分離(データインポート部分から分離)
コンポーネントの画面のみを表示し、中央リポジトリでデータを管理します.
これまで、私がやってきたプロジェクトは、コンポーネント内で非同期リクエストと画面表示の作業を行い、それらを分離する必要があります.

李徳思について詳しく説明しましょう。

中央リポジトリのデータは変更する必要があります.アクションが必要です.(履歴ロール、レコード保持)Dispatchがこのアクションを実行すると、中央リポジトリが変更されます.
ここでは、Dispatch時にReduserに記録する方式によって変更する.
Reduserは,動作によって以前の状態を次の状態にする関数である.(一定のまま)
変更されたステータスは、このステータスを使用するすべての構成部品にユーザーセレクタとして適用されます.

ここで、なぜreducerオブジェクトは不変性を維持しますか?

{} === {} // false

const a = {};
const b = a; 
a === b // true

この概念をよく運用しなければならない.変更履歴は、新しいオブジェクトを作成する場合にのみ追跡されます.
reduceが戻るときにオブジェクトを再作成する理由も、前のレコードと次のレコードを残すためです.
新しいオブジェクトとして作成せずに直接参照関係に変換すると、変更レコードは失われます.

switch (action.type){
	case 'CHANGE_NICKNAME':
    	return {
        	...state,
            name: action.data,
        }
    }
    case 'CHANGE_AGE':
        return {
            ...state,
            name: action.data,
        }
    }
}

returnにおける...stateの意味は、多くのコード量を減らすためであるが、参照関係を維持するためであることもある.(変更しない子供は参照関係を保つのでメモリを節約できます.あ、でも開発モードでしか履歴を見る必要がないのでメモリを節約できます;配置モードでは履歴を必要としないので全部捨てることができ、メモリの心配はありません.)
オブジェクトの参照関係をよく理解する必要があります.
ポート番号を3060に変更する場合は、パッケージしてください.jsonから"dev": "next -p 3060"に変えればいいです.

記憶する

const id = state.user?.id

?は、外部フィルタ演算子です.
postがない場合はundefinedが表示されている場合はpostです.idになります.

state.user.id && state.user.id

これと同じ意味です
イメージがスタイルラインの場合のinline-blockプロパティアノテーション
配列にjsxを入れる場合は、常にkeyを入れる必要があります.