Redux学习(高级)

2018-11-15 本文已影响20人 lmmy123

异步Action

一般情况下，每个 API 请求都需要 dispatch 至少三种 action：

一种通知 reducer 请求开始的 action
对于这种 action，reducer 可能会切换一下 state 中的 isFetching 标记。以此来告诉 UI 来显示加载界面
一种通知 reducer 请求成功的 action
对于这种 action，reducer 可能会把接收到的新数据合并到 state 中，并重置 isFetching。UI 则会隐藏加载界面，并显示接收到的数据。
一种通知 reducer 请求失败的 action
对于这种 action，reducer 可能会重置 isFetching。另外，有些 reducer 会保存这些失败信息，并在 UI 里显示出来

{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }

异步action 创建函数

// 第一个thunk action 创建函数
import fetch form 'cross-fetch'

export function fetchPosts(val){
  return function(dispatch){
    // 首次dispatch,Api 请求发起了
    //通知 reducer 请求开始的 action
    dispatch(requestPosts(val))
    // thunk middleware 调用的函数可以有返回值
    // 返回一个promise对象
    return fetch(`htttp: www.sdfusd.com/${val}`)
        .then(
            response=>response.json(),
            // 不要使用catch捕获错误
            error=>console.log(error)
            ).then(json=>{
            // 通知 reducer 请求成功的 action
            dispatch(receivePosts(val,json))
          })
        
  }
}

使用 applyMiddleware()

import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import { createStore, applyMiddleware } from 'redux'

const loggerMiddleware = createLogger()
const store = createStore(
  rootReducer,
  applyMiddleware(
    thunkMiddleware, // 允许我们dispatch函数
    loggerMiddleware
  )
)

//调用
 store.dispatch(fetchPosts('reactjs')).then(()=>console.log(store.getState()))

// 使用async函数优雅实现

export const getProData=()=>{
  // 返回异步dispatch action创建函数
  return async dispatch=>{
    try{
        let result = await API.getProduction()
        dispatch({
          type: GETPROGEUDF,
          data: result
          })
      }catch(err){
        console.log(err)
      }
  }
}

// 页面调用
import { getProData } from ''./actions'
this.props.getProData()

Middleware

middleware是位于action被发起之后,到达reducer之前的扩展点,可以用来进行日志记录,创建崩溃报告、调用异步接口等等
Middleware 接收了一个 next() 的 dispatch 函数，并返回一个 dispatch 函数，返回的函数会被作为下一个 middleware 的 next()

搭配React Router

const Root = ({ store })=>(
  <Provider store={store}>
    <Router>
      <Route path="/" component={App} />
    </Router>
 </Provider>
)

技巧

使用对象展开符 ...spread 替代 Object.assign()

reducer 里不要使用 Object.assign(state, newData)，应该使用 Object.assign({}, state, newData)

服务端渲染

当服务器收到请求时,将组件渲染成HTML字符串,返回给客户端
使用React.renderToString()

import { renderToString } from 'react-dom/server'
function handleRender(req, res) {
  // 创建新的 Redux store 实例
  const store = createStore(counterApp);

  // 把组件渲染成字符串
  const html = renderToString(
    <Provider store={store}>
      <App />
    </Provider>
  )

  // 从 store 中获得初始 state
  const preloadedState = store.getState();

  // 把渲染后的页面内容发送给客户端
  res.send(renderFullPage(html, preloadedState));
}

function renderFullPage(html, preloadedState){
  return `
    <!doctype html>
    <html>
      <head>
        <title>Redux Universal Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          // window.__INITIAL_STATE__ 获取 preloadedState
          window.__INITIAL_STATE__ = ${JSON.stringify(preloadedState)}
        </script>
        <script src="/static/bundle.js"></script>
      </body>
    </html>
`
}

API文档

Redux

createStore(reducer,[preloaderdState, [enhancer]])
combineReducers(reducers)
applyMiddleware(...middlewares)
-bindActionCreatores(actionCreators, dispatch)
compose(...functions)

store API

getState()
dispatch
subscribe(listener)
getReducer()
replaceReducer(nextReducer)

React Redux API

<Provider store={store}>
connect()