支持next.js (getStaticProps/getServerSideProps) 数据获取方法? about helux HOT 4 CLOSED

function Blog({ posts }) {
  // Render posts...
}

// 此函数在构建时被调用
export async function getStaticProps() {
  // 调用外部 API 获取博文列表
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 通过返回 { props: posts } 对象，Blog 模块
  // 在构建时将接收到 `posts` 参数
  return {
    props: {
      posts,
    },
  }
}

export default Blog

// ###### runConcent.js里的代码 ######
run({
  postModule: {
    state: { posts: null },
  }
})

// ###### 组件里的代码 ######
function Blog({ posts }) {
  const { setState, state } = useConcent('postModule');
  React.useEffect(()=>{
     setState({posts}); // 数据同步到store
  }, [posts]);
  const targetPosts = state.posts || posts; // 优先取模块状态，再取props.posts
}

// 此函数在构建时被调用
export async function getStaticProps() {/** ... */}

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

// 此函数在构建时被调用
export async function getStaticProps() {
  // 调用外部 API 获取博文列表
  await delay();
  const posts = [
    { id: 1, name: 'post1 -----' },
    { id: 2, name: 'post2 --- welcome to use concent' },
  ];

  // 这个返回对象会透传给 根组件的pageProps，
  // 在此返回状态所属的模块，和状态实体对象
  // 在那里将状态记录到store
  return {
    props: {
      module: 'test',
      state: { posts },
    }
  };
}

import '../styles/globals.css'
import './runConcent'
import { setState } from 'concent';

function MyApp({ Component, pageProps }) {

  // 这里记录 getStaticProps 的返回状态到store的对应模块
  if (pageProps.module) {
    setState(pageProps.module, pageProps.state);
  }
  
 // 这里透传与否都无所谓了，因为所有子孙组件不是从props读取数据了
  return <Component {...pageProps} />
}

export default MyApp

const PostList = React.memo(function () {
  /** @type Ctx */
  const { state } = useConcent('test');
  return (
    <div>
      {state.posts.map(item => <h3 key={item.id}>{item.name}</h3>)}
    </div>
  );
});

const PostLength = React.memo(function () {
  /** @type Ctx */
  const { state } = useConcent('test');
  return <h1>{state.posts.length}</h1>;
});

export default function PostPage(props) {
 // 这里完全可以不需要读取 props 数据了，所有子组件可以从concent的store里获取到数据
  return (
    <div>
      <h1>this is post page</h1>
      <PostList />
      <PostLength />
      <button onClick={toHomePage}>to home page</button>
    </div>
  );
}