初めて見たRedux

初めて君に出会った瞬間🤬

クレイジーなRedux...
紛らわしいRedux...
🤯🤯🤯🤯🤯🤯🤯🤯
初めて見る時は必ずこれを使いますか?という考えが生まれた.
整然とした感じがなく、勝手に貼り付けたような感じです.
でも見ていると整理されていないものが頭の中に🤯🤯はい.ほほほ
(剛生活コード)

しかし、まだ少し熟知しています。

どれだけ熟知しているか整理してください.

オーダー

Reduxを初めて見たときの最大の問題は、インターネット上で見つけられる多くの例が各部分をモジュール化していることです.
何がどこで使われているのか、何が何とつながっているのか全然分からない.

その時。👇 この子を見てください。

1) 초기 state를 정의

2) action
   객체를 리턴하는 action creator 함수를 작성

3) reducer
   action 의 타입에 따라서 새로운 state를 생성해내는 순수 함수


4) reducer를 이용한 store 생성

この順番で行けばいいです.(モジュール化はそれらを分けるだけです.)

action creator

ActionCreatorは、actionオブジェクトを作成する関数です.
その形態は単独では確定されていません
私は勝手に関数を書くことができますが、actionオブジェクトのフォーマットに従って任意のオブジェクトを返すだけでいいです.
この対象はこうです.

{type : 'ACTION'
 payload: {...}
}

このようにして作成されたオブジェクトはreduce関数に入ります.
このときreduce関数はactionオブジェクトtypeに割り当てられた値に基づいて分岐する.

reducer

actionオブジェクトと現在のstateをパラメータとして受信することで、新しいstateを作成します.

export const postsReducer = (prevState = initPosts, action) => {
    switch(action.type){
        case ADD_POST :
            return Object.assign({}, prevState, {
                ...prevState,
                posts : [...prevState.posts, action.post]
            })

        default:
            return prevState
    }
}

このようにブランチを作成し、actionに入るオブジェクトのタイプに応じて対応する状態を返します.

combineReducer

プロジェクトが複雑になるとreduce関数に対応する条件が肥大化して困難になる.
このとき,各減速機を分離合併したAPIがコンビネーション減速機である.

const rootReducer = combineReducers({
    name : nameReducer,
    posts : postsReducer
}) 
export default rootReducer

const rootReducer = combineReducers({
    nameReducer,
    postsReducer
}) 
export default rootReducer

両方のコードに「ほぼ」同じ結果が表示されます.

stateの表示

前者.

{name : {...},
  posts : {...}
}

後者.

{nameReducer : {...},
  postsReducer : {...}
}

違いは大したことではありませんが、この点を見ると、reduxがどのように働いているかのプロセス全体が見えます.
storeを生成すると、渡されたreduceはdispatchを介してreduceでオブジェクトを返すと、結果値に基づいて新しいstateが作成されます.
したがって、上記の例の違いは、以下のcreateStoreが各減速機の初期状態に基づいていることである.
stateでkey:valueが生成されるため、この違いが発生します.
Combined Reducerは、各Reducerが返す値をstoreに渡す前に、それらを再結合しているようです.

Store

createStore
StoreはパラメータとしてReducerを使用します.
reduceはその後dispathによってreduceに情報を入れて加工する.
この場合、reduceごとに初期状態を指定できますが、createStoreでinitialstateを2番目のパラメータとして渡すことができます.

With React Hooks

上の内容は何の違いもありません.
storeにstateをロードしたり、dispatchで方法を変更したり、reactで他のコンポーネントにstateを使用できるようにしたりするだけで、これらは異なります.(私の知る限りでは…)
以上の3つの例を以下に示す.

import { useSelector, useDispatch } from 'react-redux'
import { addPost, changeName  } from '../actions/actions'
import { useState, useRef } from 'react'

const Display = (props) => {

    const { name, posts } = useSelector(state=>state)
    const [ value, setValue ] = useState('')
    const dispatch = useDispatch()

    
    {... 중략}

    const handleClick = (e) => {
        dispatch(changeName(value))
        setValue('')
    }

    {... 후략}
}

const store = createStore(rootReducer)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

* useSelector

userSelectorはstoreからデータをインポートします.ユーザー・セレクタが自動的に購読します.
したがって、stateが変更されると、構成部品が自動的に再表示されます.

useSelector(state=>state.value)

store.getState().value 

この2つの結果は同じだと思います.

!!! 性能を改善する方法があるようです。これから必要な时に勉强します!

* useDispatch

この部分は純Reduxと全く同じです!

かばう!

const store = createStore(rootReducer)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Providerは、APPのすべてのコンポーネントがstoreにアクセスできるようにします.