react ssr之next 最佳实战 （四）

redux 之next.js (react ssr)

根据redux的写法， 首先要找到跟组件， next.js的话， 需要 在pages/_app.js写入控制， 官方例子：

import App, {Container} from 'next/app'
import React from 'react'

export default class MyApp extends App {
  static async getInitialProps ({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return {pageProps}
  }

  render () {
    const {Component, pageProps} = this.props
    return <Container>
      <Component {...pageProps} />
    </Container>
  }
}

然后重启。（官方没提到）， 不过很不幸， 再次运行后遇到了错误。

但是这个问题不大， 安装下这个模块就解决了

npm install js-tokens

如果不行的话， 请尝试下面的做法， 不过我是直接安装模块就直接解决了。

---

redux

redux本来并不复杂， 无非就是监听，订阅， 发布， 把动作跟执行变得更纯， 只是怎么设计比较麻烦。 下面看一个简单得例子。

var redux = require("redux")

function reduxStore(store = 0, action){
    store = action.type == 0 ? 0 : 1
    return store
}

const Store = redux.createStore(reduxStore)
Store.subscribe(() => console.log(`store value: ${Store.getState()}`))
Store.dispatch({type: 1})
Store.dispatch({type: 0})
Store.dispatch({type: 1})

就这样。

react-redux

然后"学完了"redux, 看看react-redux
因为要配合使用（当然， 不用也可以，但是这样就需要一层一层props）， react-redux有两个必须用得API
<Provider Store>跟connect()()

同构

待写。。。 mmp， 都没人看， 慢慢写， 有空就写。

--未完--

参考链接
https://doc.react-china.org/docs/optimizing-performance.html