反応フックによる状態管理

私はここで反応フックを使用して状態管理を提示するビデオに基づいて.
州管理によって、私はどんなコンポーネントにも属していないが、プロバイダーコンポーネントの内部で作成された共有状態を作成することを意味します.そのためには、コンテキストを作成する必要があります.ここでは、ストアに対処するために必要な機能をすべて提供します.

import {useState,createContext,useContext} from 'react'

const makeStore=(initialValue)=>{
    const context=createContext()

    const StoreProvider=({children})=>{
      const ctxValue=useState(initialValue)
      return <context.Provider value={ctxValue}>{children}</context.Provider>
    }

    const useStore=()=>useContext(context)
    return {useStore,StoreProvider}
  }

  export default makeStore

ご覧のように、この関数はプロバイダーコンポーネントの状態を宣言しますuseState フック.我々が代わりに使用するならばuseReducer そうすることもできます.

import {useReducer,createContext,useContext} from 'react'

const makeStoreBis=(reducer,initialValue)=>{
    const context=createContext()

    const StoreProvider=({children})=>{
      const ctxValue=useReducer(reducer,initialValue)
      return <context.Provider value={ctxValue}>{children}</context.Provider>
    }

    const useStore=()=>useContext(context)
    return {useStore,StoreProvider}
  }

  export default makeStoreBis

この最後のケースでは、状態の初期値をプラスする還元関数を供給する必要があります.
どのように、我々はこのユーティリティ機能を使いますか?さて、私たちは、私たちが提供したい店でより具体的に定義されたものに基づいて、他のユーティリティ機能を定義したいかもしれません.たとえば、我々はカウンタアプリの状態を管理したいとしましょう.そのためには店が必要です.

import makeStore from './makeStore'

const makeCounterStore=(initialValue)=>{
const counterStore= makeStore(initialValue)

const {useStore,StoreProvider:CounterProvider} = counterStore

const useCounter=()=>{
    const [counter]=useStore()
    return counter
}

const useIncrement=()=>{
    const [,setCounter]=useStore()
    return ()=>setCounter(counter=>counter+1)
}

const useDecrement=()=>{
    const [,setCounter]=useStore()
    return ()=>setCounter(counter=>counter-1)
}

return {CounterProvider,useCounter,useIncrement,useDecrement}
}

export default makeCounterStore

ここではmakeCounterStore ユーティリティ機能.それは状態の初期値だけを必要とします.また、定義することができますmakeCounterStoreBis 他のバージョンのmakestoreを使用する関数useReducer フック):

import makeStoreBis from './makeStoreBis'

export const INCREMENT='INCREMENT'
export const DECREMENT='DECREMENT'

const getIncrement=()=>({type:INCREMENT})
const getDecrement=()=>({type:DECREMENT})

const makeCounterStoreBis=(reducer,initialValue)=>{
const counterStore= makeStoreBis(reducer,initialValue)

const {useStore,StoreProvider:CounterProvider} = counterStore

const useCounter=()=>{
    const [counter]=useStore()
    return counter
}

const useIncrement=()=>{
    const [,dispatch]=useStore()
    return ()=>dispatch(getIncrement())
}

const useDecrement=()=>{
    const [,dispatch]=useStore()
    return ()=>dispatch(getDecrement())
}

return {CounterProvider,useCounter,useIncrement,useDecrement}
}

export default makeCounterStoreBis

この最後のケースでmakeCounterStoreBis 関数はパラメータとして供給される減速器を必要とする.
ご存知のように、両方のケースでは、特定の種類のストア(この場合、「カウンター」タイプのストア)を扱うAPIを定義しています.そして、APIは両方のケースで同じです.
だから、いくつかの店を作成し、アプリでそれらを使用する時間です.
を使いましょうmakeCounterStore , 状態の初期値を必要とするもの.
ここではどのように我々はApp コンポーネント

import counterStore from './stores/counter'
import Counter from './components/Counter'

const {CounterProvider}=counterStore

function App() {
  return (
    <CounterProvider>
        <Counter />
    </CounterProvider>
  );
}

export default App;

ご覧のように、我々は2009年に作成されたストアをインポートしている./stores/counter . このファイルの内容を見てみましょう.

import makeCounterStore from "../utils/makeCounterStore"

export default makeCounterStore(0)

我々は、新しい店を呼び出すことによってmakeCounterStore(0) (状態の初期値は0 ).
に戻るApp コンポーネントを参照してくださいCounter コンポーネント.これがcounter コンポーネントのようになります.

import counterStore from '../stores/counter'

const {useCounter,useDecrement,useIncrement}=counterStore

function Counter(){
    const counter=useCounter()
    const increment=useIncrement()
    const decrement=useDecrement()

    return <div>
        <button onClick={increment}>+</button>{counter}<button onClick={decrement}>-</button></div>
}

export default Counter

そしてそれはすべてのカウンタのアプリを持っているとフックの状態(共有状態)を管理して実行する必要があります.
我々のカウンターストアのバージョン2を使いたいと言いましょうmakeCounterStoreBis . この場合、供給される還元関数を必要とします.でもまずどうやって見ましょうApp コンポーネントの変更

import counterStore from './stores/counterBis'
import Counter from './components/Counter'

const {CounterProvider}=counterStore

function App() {
  return (
    <CounterProvider>
        <Counter />
    </CounterProvider>
  );
}

export default App;

ご存知のように、我々は我々のカウンターストアを輸入しているという例外で、前と全く同じコンポーネントです./stores/counterBis の代わりに./stores/counter 前と同じ.では、見てみましょうcounterBis file (ストアを作成するファイル)

import makeCounterStoreBis,{INCREMENT,DECREMENT} from '../utils/makeCounterStoreBis'

const reducer=(counter,action)=>{
    switch(action.type){
        case INCREMENT:
            return counter+1
        case DECREMENT:
            return counter-1
        default:
            return counter
    }
}

export default makeCounterStoreBis(reducer,0)

このファイルではカウンターストアをインスタンス化します.私たちはまた、還元される還元器を定義しますmakeCounterStoreBis とこのストアの初期状態0 ).
これにより、ストアのバージョン2で状態を管理する必要があります.The Counter 今、私たちが店を輸入するという意味でのコンポーネントの変更stores/counterBis の代わりにstores/counter , しかし、残りは同じです.なぜなら、2つの店が同じAPIを使って対話するからです.

import counterStore from '../stores/counterBis'

const {useCounter,useDecrement,useIncrement}=counterStore

function Counter(){
    const counter=useCounter()
    const increment=useIncrement()
    const decrement=useDecrement()

    return <div>
        <button onClick={increment}>+</button>{counter}<button onClick={decrement}>-</button></div>
}

export default Counter

これで、私の記事のプレゼンテーションを終えます.閉じるこの動画はお気に入りから削除されています.ありがとう.