[React] Redux

Redux

(of a topic, attributive, postpositive) Redone, restored, brought back, or revisited. 帰りました.

After an unusually cold August, September felt like summer redux as a heatwave sent temperatures soaring.

reduxという言葉の意味とは関係ないようです.

Reduxは、ステータス管理用のJavaScriptライブラリです.

なぜReduxが必要なのですか?

Reduxは...

グローバルストレージ

防潜孔

状態はlocalとglobalの2種類あります.
Local stateは、1つの構成部品で定義され、その構成部品のみで管理されます.
グローバル・ステータスは、1つの構成部品内で定義され、別の構成部品によって管理されるステータスです.
Reactでは、サブエレメントが親エレメントのステータスにアクセスするには、propsでステータスまたはステータスを変更する関数を渡す必要があります.ただし、ステップ5の下のサブコンポーネントに渡さなければならない場合は、各サブコンポーネントのpropsに渡さなければならない.各構成部品にこのpropsが必要とされるとは限らず、途中でエラーが発生すると管理が困難になります.したがって、Reduxを使用してグローバル状態リポジトリを作成し、サブコンポーネントを巡回することなく状態にアクセスできます.

3 principles of redux

Single source of truth (store)

State is read-only (only through action)

Changes are made with pure functions (reducer function)

Redux flow

import { createStore } from 'redux'

// REDUCER
// 현재의 state 와 action 객체를 받아 새로운 state 를 return 하는 함수.
function myReducer(state = { value: 0 }, action) {
  switch(action.type) {
    case 'increment':
      return { value: state.value + action.value }
    case 'decrement':
      return { value: state.value - 1 }
  }
}

// STORE
// app 의 state 를 들고 있는 store 객체이다.
const store = createStore(myReducer)

// ACTION
// Action creator - action 객체를 만든다.
function increment(value) {
  return {
    type: 'increment',
    value // value: value
  }
}
function decrement(){
  return { type: 'decrement' }
}

// DISPATCH
// 상태를 update 하는 유일한 방법은 dispatch() 함수에 action 객체를 전달하는 것이다.
// store는 reducer 함수를 실행하고 상태를 update 하여 저장한다. 
function handleIncrement(value){
  store.dispatch(increment(value))
}
function handleDecrement(){
  store.dispatch(decrement())
}

// DISPATCH for react-redux (redux hooks)
useDispatch(함수)

// state 조회
handleIncrement(4)
console.log(state.getState()) // { value: 4 }

// SELECTOR
// Selector 함수는 어떤 state 를 store 에서 가져오는지 지정하는 함수다.
const selectMyValue = function(state) { return state.value } 
// 'value' 라는 상태를 가져올 것이다.
const currentValue = selectMyValue(store.getState())
console.log(currentValue) // 4

// SELECTOR for react-redux (redux hooks)
const state = useSelector(state => state.myReducer);

画像:https://redux.js.org/tutorials/essentials/part-1-overview-concepts
Reduxを使用するとreactistateを使用しないわけではありません.二つを混ぜて使う.
通常、自分のコンポーネントで解決するstateはreact stateを使用し、propsで渡されるstateはreduxを使用するのがよい.

ひどうきどうさせいさんしゃ

リデスが非同期タスクを処理する場合、redux-thunkというミドルウェアがよく使用されます.
でもちょっとわかりにくい
そしてRedux-Saga

Presentational vs Container components

コンポーネントを表す:寸法を生成するコンポーネント
container component:ステータスと機能を管理するコンポーネント