Reactを使用したSNSの作成-Redux(1)

1.インストールと必要性の説明

(1)デフォルトの冗長インストールと設定

端末にnpm i next-redux next-redux-wrapperを入力してインストール

storeフォルダを作成してStoreを構成します。jsファイルの作成 import { createWrapper } from "next-redux-wrapper"; import { createStore } from "redux"; const configureStore = () => { const store = createStore(reducer, enhancer); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default configureStore;

### (2) _app.js 파일 수정
> ```
...
import wrapper from "../store/configureStore";
...
export default wrapper.withRedux(NodeBird);

2.李徳思の原理と不変性

（1）李徳思の原理

画像として理解する 大きなリポジトリで使用するデータをメモします。 変えたいアクションを作る パッチ処理により、リポジトリのデータ値が変更されます。 このとき変化するのはreducerです。 stateとreduceを含めてstoreです。

不変性の理解 reduceから値を返す..。state, name: action.なぜデータに似ているのですか? =>オブジェクトは{}={}//falseなので、前のオブジェクトをインポートした後、変更したいオブジェクトを変更するだけです。 =>参照関係で直接変更すると、元のオブジェクトが変更されます。 =>これもメモリを節約するためです。

3.実装Ridex

(1)InitialStateの作成

const initialState = {
  name: "dongduu",
  age: 23,
  password: "dlehdwn412",
};

(2)actionの作成

const changeNickname = (data) => {
  return {
    type: "CHANGE_NICKNAME",
    data,
  };
};

=>データを受信し、直接変更できるようにします.
=>これにより、actionの作成を最小限に抑えることができます.

（3）減速機の作成

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case "CHANGE_NICKNAME":
      return {
        ...state,
        name: action.data,
      };
  }
};

export default rootReducer;

=> configureStore.jsで受け入れる.

(4)アクションの使用

changeNickname("leedongjoo");
// {
//     type: "CHANGE_NICKNAME",
//     data: 'leedongjoo'
// }
store.dispatch(changeNickname("dj"));