react hooks下パッケージ汎用redux

reduxグローバルステータス管理によく使われています.一般的には、機能モジュールによって関連するactionを新規作成し、reducerはcombineReducersを使用して組み合わせてエクスポートします.そうすると、モジュールの区分が実現され、プロジェクトの管理が容易になります.しかし、場合によっては、チャット関連のreduxを管理するためにchatモジュールを新規作成し、メニューモジュールを管理するためにmenuモジュールを新規作成し、データ状態を管理するためにnumberモジュールを新規作成します.しかし、この場合、上部ナビゲーションバーの表示と非表示に他のコンポーネントと対話するためにreducerを追加したいのですが、この場合、navモジュールを別途開く必要がありますか?嫌がるに違いないので、私たちのこれらの比較的小さい機能モジュールに対して、私たちは共通のreducerをパッケージしたいと思っています.この共通のreducerはnormalデータを共有しています.dispatchの時にデータkeyのセットを受け入れて、valueはデータの変更を行います.次は私たちのパッケージプロセスです.

まずnormalReducerを作成する必要があります.次の

です.

// store/normal/reducer.js

export const normalReducer = (state = {
     }, action) => {
     
  if(action.type === 'normal') {
      //         reducer
    const {
      payload: {
      key, value } } = action
    return {
     
      ...state,
      [key]: value
    }
  } else {
     
    return state
  }
}

// store/index.js

import {
      normalReducer } from './normal/reducer.js'

const rootReducer = combineReducer({
     
  normal: normalReducer,
  ...
})

これにより、

をこのように使用できる汎用normalモジュールを簡単に実現しました.

import * as React from 'react'
import {
      useSelector, useDispatch } from 'react-redux'

const Home = () => {
     
  const normalState = useSelector((state) => state.normal) //        normal   
  const dispatch = useDispatch() //   dispatch  

  const changeOk = () => {
     
    dispatch({
     
      type: 'normal',
      payload: {
     
        key: 'isOk',
        value: !normalState.isOk
      }
    })
  }

  return (
    <div className="home">
      <div>{
      normalState.isOk }</div>
      <button onClick={
      changeOk }>      </button>
    </div>
  )
}

はこのように私たちのデータ状態を更新して、このように私たちは毎回dispatchの関連部分を書く必要がありますが、まだ少し煩わしいので、useStateの書き方を参考にして、キー値を受信して、データ値とデータ操作関数を返して、以下の

// src/effect/reducer
import * as React from 'react'
import {
      useSelector, useDispatch } from 'react-redux'

export const normalReducerDispatch = (key) => {
     
  const dispatch = useDispatch()
  const normalInfo = useSelector(state => state.normal)
  const stateValue = normalInfo[key]
  const setNormalInfo = (value) => {
     
    dispatch({
     
      type: 'normal',
      payload: {
     
        key,
        value
      }
    })
  }
  return [stateValue, setNormalInfo]
}

//上にカプセル化すると、useStateのようにnormalモジュールを使用することができます.使用するページに使用を導入すればいいです.以下のようにします.

// src/home.jsx
import * as React from 'react'
import {
      normalReducerDispatch } from 'src/effect/reducer'

const Home = () => {
     
  const [isOk, setIsOk] = normalReducerDispatch('isOk')

  return (
    <div className="home">
      <div>{
      isOk }</div>
      <button onClick={
      setIsOk(!isOk) }>      </button>
    </div>
  )
}

は、上記のコードと同じ機能を実現し、reduxを使用する必要がある他のモジュールも

を使用することができます.