Next.js学习日记（三）：数据和使用Redux

getInitialProps

1.getInitialProps在初始化组件props使用，只在服务端使用，没有跨域限制(同构） 2.getInitialProps只能作用于页面组件，不能用于子组件

函数式组件

import axios from axios
export default function Films(){
    return (
        <ul>
            {
                this.props.film.map((item)=>{
                    return (<div>{item}</div>)
                })
            }
        </ul>
    )
}
Films.getInitialProps=()=>{
    const res=await axios.get()  
    return ({
        film:res.data.film
    })   
}

类式组件

import axios from axios
import React, { Component } from 'react'

export default class films extends Component {
    static async getInitialProps(){
        const res=await axios.get()
        return {
            list:res.data.films
        }
    }
    render() {
        return (
            <div>
                <ul>
                    {this.props.list.map((item)=>{
                        <li>{item}</li>
                    })}
                </ul>
            </div>
        )
    }
}

使用redux

yarn create next-app --example with-redux 项目名称

store.js

import { useMemo } from 'react'
import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'

let store

const initialState = {
  todos:['hello world']
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      const todos=state.todos.slice(0)
      todos.push(action.payload)
      return Object.assisn({},state,{
        todos  
      })
    default:
      return state
  }
}

function initStore(preloadedState = initialState) {
  return createStore(
    reducer,
    preloadedState,
    composeWithDevTools(applyMiddleware())
  )
}

export const initializeStore = (preloadedState) => {
  let _store = store ?? initStore(preloadedState)

  // After navigating to a page with an initial Redux state, merge that state
  // with the current state in the store, and create a new store
  if (preloadedState && store) {
    _store = initStore({
      ...store.getState(),
      ...preloadedState,
    })
    // Reset the current store
    store = undefined
  }

  // For SSG and SSR always create a new store
  if (typeof window === 'undefined') return _store
  // Create the store once in the client
  if (!store) store = _store

  return _store
}

export function useStore(initialState) {
  const store = useMemo(() => initializeStore(initialState), [initialState])
  return store
}

app.js

import { Provider } from 'react-redux'
import { useStore } from '../store'

export default function App({ Component, pageProps }) {
  const store = useStore(pageProps.initialReduxState)
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

todo.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Todo extends Component {
    render() {
        return (
            <div>
                <input type="text" ref="ipt"/>
                <button onClick={()=>{
                    console.log(this.props)
                    this.props.addTodo(this.refs.ipt.value)}}>添加</button>
               <ul>
                {this.props.aaa.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })}   
                </ul> 
            </div>
        )
    }
}
const mapStateToProps=(state)=>({
    aaa:state.todos
})
const mapDispatchToProps=(dispatch)=>({
    addTodo:(val)=>{
        dispatch({
            type:'ADD_TODO',
            payload:val
        })
    }
})
export default connect(mapStateToProps,mapDispatchToProps)(Todo)