normalizr 学习笔记 — node.js开发

最近开始学习node.js开发，有很多基础知识和框架需要学习，所以打算将自己学习笔记记录下来，即可以和大家分享，也可以方便自己以后回顾知识。由于只是个人笔记，便不是详细的教程，有不懂的代码还请自行百度。

---

主要模块

• normalizr

介绍

该模块主要将获取的数据进一步格式化，在store创建一个虚拟数据库，数据通过id引用

代码段

由于我学习时是配合redux进行使用的，所以这里主要是在redux的基础上进行讲解的，redux的相关内容可参考Redux 学习笔记 — node.js开发，或者自行查找自动学习。

我使用了redux官方的例子real-world中的部分源码，大家可以配合这个学习

import api from '../api'...applyMiddleware(thunk, api, createLogger())

添加real-world的api中间组件

import { Schema, arrayOf, normalize } from 'normalizr'

在api中导入normalizr模块

const historySchema = new Schema('historys', {  idAttribute: history => history.ContractID})const userScheme = new Schema('users', {  idAttribute: user => user.UserID})const replySchema = new Schema('replys', {  idAttribute: reply => reply.ReplyID})userScheme.define({  history: historySchema})historySchema.define({  reply: replySchema})

数据结构定义，define()定义包含的schema

export const Schemas = {  HISTORY: historySchema,  HISTORY_ARRAY: arrayOf(historySchema),  REPLY: replySchema,  REPLY_ARRAY: arrayOf(replySchema),  USER: userScheme,  USER_ARRAY: arrayOf(userScheme)}

输出数据结构模板，arrayOf()模板数组化

const API_ROOT = 'http://localhost/app/'function callApi(endpoint, schema, method, form) {  const fullUrl = (endpoint.indexOf(API_ROOT) === -1) ? API_ROOT + endpoint : endpoint  let requestType;  if (method === 'POST') {    requestType = {      method: method,      body:form    }  } else if (method === 'GET') {    requestType = null  }  return fetch(fullUrl, requestType)    .then(response => {      return response.json()        .then(json =>          ({ json, response })        )    })    .then(({ json, response }) => {      if (!response.ok) {        // 回调规范的处理失败格式        return Promise.reject(json)      }      if (json.code !== 200) {        // 回调规范的处理失败格式        return Promise.reject(json)      }      return Object.assign({},normalize(json.data, schema))    })}

根据action传过来的参数，进行不同的网络请求，请求成功后的数据通过normalize()进行转换

// action keyexport const CALL_API = 'CALL_API'export default store => next => action => {  const callAPI = action[CALL_API]  if (typeof callAPI === 'undefined') {    return next(action)  }  let { endpoint, method, form } = callAPI  const { schema, types } = callAPI  if (typeof endpoint === 'function') {    endpoint = endpoint(store.getState())  }  if (typeof endpoint !== 'string') {    throw new Error('Specify a string endpoint URL.')  }  if (!schema) {    throw new Error('Specify one of the exported Schemas.')  }  if (!Array.isArray(types) || types.length !== 3) {    throw new Error('Expected an array of three action types.')  }  if (!types.every(type => typeof type === 'string')) {    throw new Error('Expected action types to be strings.')  }  function actionWith(data) {    const finalAction = Object.assign({}, action, data)    delete finalAction[CALL_API]    return finalAction  }  const [ requestType, successType, failureType ] = types  next(actionWith({ type: requestType }))  return callApi(endpoint, schema, method, form).then(    response => next(actionWith({      response,      type: successType    })),    error => next(actionWith({      type: failureType,      error: error.message || 'Something bad happened'    }))  )}

分为3个action请求阶段，requestType， successType，failureType，根据callApi()返回的结构进行异步调用，此时数据已经存入store中的虚拟数据库，之后将action传给真正的reduce将id数据存入

import _ from 'lodash'...function entities(state = {  users: {},  historys: {},  replys: {}}, action) {  if (action.response && action.response.entities) {    return _.merge({}, state, action.response.entities)  }  return state}

这里用到lodash模块的merge，将所有请求获取到的数据和store虚拟数据库进行合并更新

const pagination = combineReducers({  historyBySection: paginate({    mapActionToKey: action => action.section,    types: [      ActionTypes.HISTORY_REQUEST,      ActionTypes.HISTORY_SUCCESS,      ActionTypes.HISTORY_FAILURE    ]  }),  replyByHistory: paginate({    mapActionToKey: action => action.historyId,    types: [      ActionTypes.REPLY_REQUEST,      ActionTypes.REPLY_SUCCESS,      ActionTypes.REPLY_FAILURE    ]  })})

根据不同类型实现数据分页的接口，mapActionToKey作为类型指针，type接收的ActionTypes

import merge from 'lodash/merge'import union from 'lodash/union'// Creates a reducer managing pagination, given the action types to handle,// and a function telling how to extract the key from an action.export default function paginate({ types, mapActionToKey }) {  if (!Array.isArray(types) || types.length !== 3) {    throw new Error('Expected types to be an array of three elements.')  }  if (!types.every(t => typeof t === 'string')) {    throw new Error('Expected types to be strings.')  }  if (typeof mapActionToKey !== 'function') {    throw new Error('Expected mapActionToKey to be a function.')  }  const [ requestType, successType, failureType ] = types  function updatePagination(state = {    isFetching: false,    ids: []  }, action) {    switch (action.type) {      case requestType:        return merge({}, state, {          isFetching: true        })      case successType:        return merge({}, state, {          isFetching: false,          ids: union(state.ids, action.response.result),        })      case failureType:        return merge({}, state, {          isFetching: false        })      default:        return state    }  }  return function updatePaginationByKey(state = {}, action) {    switch (action.type) {      case requestType:      case successType:      case failureType:        const key = mapActionToKey(action)        if (typeof key !== 'string') {          throw new Error('Expected key to be a string.')        }        return merge({}, state, {          [key]: updatePagination(state[key], action)        })      default:        return state    }  }}

实现数据分页方法，配合了normalizr

function mapStateToProps(state, ownProps) {  const section = ownProps.section;  const {    pagination: { historyBySection },    entities: { historys }  } = state;  const historyPagination = historyBySection[section] || { isFetching: true, ids: [] }  const items = historyPagination.ids.map(id => historys[id])  return {    historyPagination,    items  }}

根据分页指针和reduce中的id，从store虚拟数据库中获取真正的数据

部分代码来自于redux官方例子real-world