リデスって何?

自己紹介
JavaScriptアプリケーションで予測可能な状態管理のコンテナライブラリを提供
基本概念
1.同じデータは常に同じ場所から(single source of truth)
2.ステータスは常に読み取り専用(state is read-only)
3.変更は純関数のみ(純関数で変更)

だからなぜリデスが必要なのか。

どんなことがあっても、順序が複雑で、コードが複雑で、利害関係が複雑であれば、そのことはいつか覆されるだろう.
reduceは、データを集中的に管理し、応答に関連するコードを大幅に簡素化します.

用語集

store

管理可能な状態は1つしかありません
レスポンスでstateを交換するには、stateをサブエレメントから親エレメントに昇格します.
再びstateを必要なサブコンポーネントに渡す必要があります.
ただし、stateは、構成部品に格納するのではなくreduxstoreに格納して情報を取得できます.

action

JAvascriptオブジェクト.オブジェクトには複数のデータが含まれており、actionオブジェクトはアプリケーションのデータをstoreに転送します.
typeは指定する必要があります.

reducer

現在のステータスとactionを使用して次のステータスを作成
データストリームはaction 객체 => Dispatch => Reducer => Store(New State)です.
(actionオブジェクトがdispatchメソッドに渡され、dispatchメソッドがreduceを呼び出す)

じょうちょうデータストリーム

1.初めてデータを読み取る場合、storeに記憶されているstateを読み出し、UIに表示する.
2.UIにおいてeventDispatchメソッドを生成し、actionオブジェクトをreducerに渡す.
3.reducerは、伝達されたactionオブジェクトを反映する新しいstateを作成し、UIに伝達する.
4.必要に応じて繰り返す

Reduxの利点

状態を予測可能にする
reduceは純粋な関数なので、次の状態が何であるかを簡単に予測できます.
メンテナンスが容易な

コンポーネント間でデータを交換する場合は、エラーが検出されたときにすべての関連コードを変更する必要がありますが、reduxを使用すると必要なコード

のみを変更できます.

のデバッグに有利
actionとstate logを記録すると、actionが発生したときに発生したすべてのことを追跡できます.

のテストが容易
プロセスの理解が容易なため、検証が必要なデータやプロセスを簡単にテストできます.

コーディング方法

store

const store = createStore(rootReducer);

すべてのstateは、単一のリポジトリとして機能します.
上記の例では、createStoreメソッドを使用してreducerを接続している.storeの作成に加えて、他のReduserの組合せをパラメータとして店舗を作成することもできる.
実際のソースコードでは、ミドルウェアとredux devtoolsを接続するために、2番目のパラメータには他の内容も含まれています.
action

function addTodo(text) {
  return {
    type: ADD_TODO,
    // 이 아래에 내용을 적는다
    dothiswork : // 반영할 내용
  }
}

typeは必ず含まなければならない内容であり、それ以外は選択して使用することもできる.actionでステータスのすべての変更を実現することで、アプリケーションがどのように変化したかを直感的に理解できます.
dispatch

const handleClick = (item) => {
  if(!todoLists.map((el) => el.todoId).includes(item.id)) {
    dispatch(notify('todo 리스트에 추가되었습니다')
  }
}

dispatchはactionを伝達する方法である.dispatchの伝達因子として、actionオブジェクトを伝達し、reducerを呼び出し、state値を変更する役割を果たす.
reducer

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_LIST:
      return Object.assign({}, state, {
        todoLists: [...state.todolists, action.dothiswork]
      })
    default:
      return state;
  }
}

reducerは、通常、上記のコードから構成される.switchの代わりにifを使用してもよい.
に注意reducerを記述する場合、reduxのstate更新は、不変の方法で変更されなければならない.(Object.assign等)

redux hooksの典型的な方法

useSelector()

構成部品とステータスを接続する役割を果たします.
構成部品では、storeの状態にuseSelector方法でアクセスすることができる.

import React from 'react'
import { useSelector } from 'react-redux'

export const TodoListItem = props => {
  const todo = useSelector(state => state.todos[props.id])
  return <div>{todo.text}</div>
}

useDispatch()

actionオブジェクトをreducerに伝達する役割を果たす.
イベントの発生に使用される構成部品.

import React from 'react'
import { useDispatch } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => dispatch({ type: 'increment-counter' })}>
        Increment counter
      </button>
    </div>
  )
}