1）NPM取付

$npm i next-redux-wrapper
$npm i redux
$npm i react-redux
$npm i redux-devtools-extension

次のように設定します.
以前のインストールから見ると、パッケージです.jsonは次のようになります.

[package.json]
{
  "name": "front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next dev -p 3001 -H 0.0.0.0",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^11.0.1",
    "next-redux-wrapper": "^7.0.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "redux": "^4.1.0",
    "redux-devtools-extension": "^2.13.9",
    "styled-components": "^5.3.0"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.13.2"
  }
}

2)😕❓ Reduxでcontextとreduceを設定するにはどうすればいいですか?

1)コンテキストの設定

store/ configureStore.js

storeフォルダを作成し、Storeを構成します.jsファイルを作成します.
ファイル拡張子は.jsxも可能ですが、reactファイルとredoxファイルを区別するために、redoxファイルは前に進みます.js拡張子が使用されます.

[store/ configureStore.js]
import {createWrapper} from 'next-redux-wrapper'
import {compose, createStore , applyMiddleware} from 'redux'
import reducer from '../reducers'
import {composeWithDevTools} from 'redux-devtools-extension'

const configureStore = ()=>{
    const middlewares=[]
    const enhancer = process.env.NODE_ENV==='production'
    ?compose(applyMiddleware(...middlewares))
    :composeWithDevTools(applyMiddleware(...middlewares))
    const Store=createStore(reducer,enhancer)
    return Store
}

const wrapper = createWrapper(configureStore,{
    debug:process.env.NODE_ENV==='development'
})

export default wrapper

Reduxの構成ストレージ領域.jsのコードを分析するために、逆にコードを分析しましょう.

1.export wrapper

export default wrapper他の構成部品も使用できるようにパッケージをエクスポートする役割を果たします.
✔️wrapper
活動範囲を設定する役割を果たす.あとでアプリケーションのステータス値をjsxファイルのオーバーヘッドとしてサブコンポーネントに渡すために使用されます.

2.createWrapper

const wrapper = createWrapper(configureStore,{
    debug:process.env.NODE_ENV==='development'
})

包装器を披露する.createWrapperは2つのスケールの価格を受け取ります.
最初の値は、初期値を宣言する関数です.
2番目のルーラー値はオプションで、上のソースコードは開発モードでデバッグを有効にすることを示しています.

3.createStore

const configureStore = ()=>{
    const middlewares=[]
    const enhancer = process.env.NODE_ENV==='production'
    ?compose(applyMiddleware(...middlewares))
    :composeWithDevTools(applyMiddleware(...middlewares))
    const Store=createStore(reducer,enhancer)
    return Store
}

上記の関数は、パッケージの最初のスケール値として定義された構成ストレージの一部です.
ReactのcreateContextとReduxのcreateStoreは類似の関数と見なすことができる.
createStoreのルーラー値
1つ目:ステータスの初期値(通常はreduce)
2つ目:オプション値
ここでは、オプション値に昇格すると発表します.さらに、この強化された値は、異なる本番、すなわち導入モデルと開発モデルを使用することです.

2）減速機設定

ReduxのReduxとReduactのReduxの違いは何ですか?

👉ReactのReducer

一人ですべての状態値の変化を引き受けるのは長いだけです!しかし、1つのファイルに管理されているので、面倒ではありません.

👉Reduxのreduce

reducersという名前のフォルダを作成し、その中の各reducersを機能(?)に分かれる.そしてcombineでマージします.コードの毒性は良いが、一つ一つコードを書く手間がかかる.

大きい枠はメモリを参照して、値は異なっています