在前兩節的基礎上，我們在這節引入react-redux，並在react-redux中使用immutablejs

建立專案

• 使用create-react-app建立目錄
• 刪除src目錄下所有檔案

建立入口檔案

// index.js
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import store from './store'
import {Provider} from 'react-redux'
import Counter from './Counter'

ReactDOM.render
 
(<Provider store={store}>
  <Counter />
</Provider>, document.getElementById('root'));

建立store

• 在src目錄下新建store目錄
• 在src/store/裡新建index.js檔案
• 這裡需要引用一個新的元件redux-immutable, 並從中間結構出來combineReducers方法。
• 因為是寫一個簡單的demo，這裡就將reducers和createStore都寫在一起了，內容如下：

import { createStore } from "redux";
import
 
 {combineReducers} from 'redux-immutable'
let immutable = require('immutable')
let { Map } = immutable
// 使用immutable建立初始狀態
let initState = Map({number: 0})

function counter(state = initState, action) {
  switch (action.type) {
    case 'ADD':
      // 更新資料，返回最新的資料物件
      let newstate = state.update('number'
 
, val => val + action.payload)
      return newstate
    default:
      return state
  }
}

let reducers = combineReducers({
  counter
})

let store =createStore(reducers)
export default store
 

Counter.js 元件

// import React,{Component, PureComponent} from 'react';
import React, { Component } from 'react';
import PureComponent from './PureComponent';
import {connect} from 'react-redux'

class Counter extends PureComponent {
  render() {
    return (
      <div>
        <p>{this.props.number}</p>
        <input ref={input => this.amount = input} />
        <button onClick={() => {
          let amount = this.amount.value - 0 || 0
          this.props.add(amount)
        }}>add</button>
      </div>
    )
  }
}
let actions = {
  add (payload) {
    return {
      type: 'ADD',
      payload
    }
  }
}
// 這裡是拿到的合併後的state， state應該也是一個immutable物件才對
export default connect(
  state => {
    console.log(({ number: state.getIn(['counter', 'number']) }))
    return ({ number: state.getIn(['counter', 'number']) })
  },
  actions
)(Counter)

PureComponent.js元件模板

import React, { Component } from 'react';
import { is } from "immutable";

// 使用immutable的處理
let prevProps = {}
class PureComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    let newProps = nextProps ? nextProps : {}
    
    // 如果屬性鍵不同，直接更新頁面
    let keys = Object.keys(newProps)
    if (Object.keys(prevProps).length !== keys.length) {
      prevProps = newProps
      return true
    }
    for (var i = 0, len = keys.length; i < len; i++) {
      let key = keys[i]
      // 如果說屬性值不一樣，說明需要更新狀態
      if (!is(newProps[key], prevProps[key])) {
        prevProps = newProps
        return true
      }
    }
    return false
  }

}

export default PureComponent

結束語

這就是簡單的immutable結合redux的引用，簡單的起一個拋磚引玉的效果