Question

我有三个页面 PageA，PageB和PageC ，其中包含表单元素formField。

globalReducer.js

中的

状态

import { fromJS } from 'immutable';

const initialState = fromJS({
  userInteractionBegun: false,
  pageActive: '',
  refreshData: true,
})

我想调度一个在组件（页面）安装并刷新pageActive时将formField设置为相应页面值（ A，B或C 中的一个）的操作。 userInteractionBegun === false为空白。

对于每个页面组件，要从 globalReducer 中获取pageActive的{{1}}状态，

props

链接到immutable.js getIn()

store.js

function PageA(props) {
  //.....
}

// globalState is defined in conigureStore, I am using immutable.js. Link provided below this code.
const mapStateToProps = state => ({
  pageActive: state.getIn(['globalState', 'pageActive']),
})

export default connect(mapStateToProps, null)(PageA);

我想抽象出每次安装组件（页面）时更新import globalReducer from 'path/to/globalReducer'; const store = createStore( combineReducers({ globalState: globalReducer, //...other reducers }) )的逻辑。

我知道如何使用HOC抽象此逻辑，但是我不知道如何使用react hooks来实现，因此每次 pageA，pageB或pageC 挂载时，如果pageActive为假，则调度对setPageActive的操作，并将formField设置为空白。

例如，我会在 pageA.js

userInteractionBegun

然后在 usePageActive.js

import usePageActive from 'path/to/usePageActive';

const [pageActive, setPageActive] = useReducer(props.pageActive);
usePageActive(pageActive);

Answer 1

我还没有很多时间将脚趾伸入反应钩中，但是在阅读了文档并玩了一会儿之后，我认为这可以满足您的要求。我在这里使用内置状态，但是您可以使用redux或其他任何您想要的效果。您可以看到此代码here的工作示例。诀窍是使用挂钩创建器来创建自定义挂钩。这样，父级和子级可以保持对相同状态的引用，而useEffect不会影响父级。

import React, { useState, useEffect } from 'react';
import ReactDOM from "react-dom";

const activePageFactory = (setActivePage) => (activePage) => {
  useEffect(() => {
    setActivePage(activePage)
    return () => {
      setActivePage('')
    }
  }, [activePage])
  return activePage
}

function App() {
  const [activePage, setActivePage] = useState('');
  const [localPage, setLocalPage] = useState('Not Selected');
  const selectedPage = () => {
    switch(localPage) {
      case 'A':
        return <PageA useActivePage={activePageFactory(setActivePage)}  />
      case 'B':
        return <PageB useActivePage={activePageFactory(setActivePage)}  />
      default:
        return null;
    }
  }
  return (
    <div>
      <p>Active page is {activePage}</p>
      <button onClick={() => setLocalPage('A')}>
        Make A Active
      </button>
      <button onClick={() => setLocalPage('B')}>
        Make B Active
      </button>
      {
        selectedPage()
      }
    </div>
  );
}

function PageA({useActivePage}) {
  useActivePage('A');
  return (
    <div>
      <p>I am Page A</p>
    </div>
  )
}

function PageB({useActivePage}) {
  useActivePage('B');
  return (
    <div>
      <p>I am Page B</p>
    </div>
  )
}

React Hooks：在componentDidMount上调度一个动作

1 个答案: