閱讀(38.8k) 書簽贊(0) 我要糾錯(cuò)

排錯(cuò)

2018-02-24 15:28 更新

排錯(cuò)

這里會(huì)列出常見的問(wèn)題和對(duì)應(yīng)的解決方案。雖然使用 React 做示例，即使你使用要其它庫(kù)仍然會(huì)有幫助。

dispatch action 后什么也沒(méi)有發(fā)生

有時(shí)，你 dispatch action 后，view 卻沒(méi)有更新。這是為什么呢？可能有下面幾種原因。

永遠(yuǎn)不要直接修改 reducer 的參數(shù)

如果你想修改 Redux 給你傳入的 state 或 action，請(qǐng)住手！

Redux 假定你永遠(yuǎn)不會(huì)修改 reducer 里傳入的對(duì)象。任何時(shí)候，你都應(yīng)該返回一個(gè)新的 state 對(duì)象。即使你沒(méi)有使用 Immutable 這樣的庫(kù)，也要保證做到不修改對(duì)象。

不變性（Immutability）可以讓 react-redux 高效的監(jiān)聽 state 的細(xì)粗度更新。它也讓 redux-devtools 能提供“時(shí)間旅行”這類強(qiáng)大特性。

例如，下面的 reducer 就是錯(cuò)誤的，因?yàn)樗淖兞?state：

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    // 錯(cuò)誤！這會(huì)改變 state.actions。
    state.actions.push({
      text: action.text,
      completed: false
    });
  case 'COMPLETE_TODO':
    // 錯(cuò)誤！這會(huì)改變 state.actions[action.index].
    state.actions[action.index].completed = true;
  }

  return state
}

應(yīng)該重寫成這樣：

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    // 返回新數(shù)組
    return [...state, {
      text: action.text,
      completed: false
    }];
  case 'COMPLETE_TODO':
    // 返回新數(shù)組
    return [
      ...state.slice(0, action.index),
      // 修改之前復(fù)制數(shù)組
      Object.assign({}, state[action.index], {
        completed: true
      }),
      ...state.slice(action.index + 1)
    ];
  default:
    return state;
  }
}

雖然需要寫更多代碼，但是讓 Redux 變得可具有可預(yù)測(cè)性和高效。如果你想減少代碼量，你可以用一些輔助方法類似 React.addons.update 來(lái)讓這樣的不可變轉(zhuǎn)換操作變得更簡(jiǎn)單：

// 修改前
return [
  ...state.slice(0, action.index),
  Object.assign({}, state[action.index], {
    completed: true
  }),
  ...state.slice(action.index + 1)
]

// 修改后
return update(state, {
  [action.index]: {
    completed: {
      $set: true
    }
  }
});

最后，如果需要更新 object，你需要使用 Underscore 提供的 _.extend 方法，或者更好的，使用 Object.assign 的 polyfill

要注意 Object.assign 的使用方法。例如，在 reducer 里不要這樣使用 Object.assign(state, newData)，應(yīng)該用 Object.assign({}, state, newData)。這樣它才不會(huì)覆蓋以前的 state。

你也可以通過(guò)使用 Babel 階段 1 模式來(lái)開啟 ES7 對(duì)象的 spread 操作：

// 修改前：
return [
  ...state.slice(0, action.index),
  Object.assign({}, state[action.index], {
    completed: true
  }),
  ...state.slice(action.index + 1)
]

// 修改后：
return [
  ...state.slice(0, action.index),
  { ...state[action.index], completed: true },
  ...state.slice(action.index + 1)
]

注意還在實(shí)驗(yàn)階段的特性注定經(jīng)常改變，最好不要在大的項(xiàng)目里過(guò)多依賴它們。

不要忘記調(diào)用 `dispatch(action)`

如果你定義了一個(gè) action 創(chuàng)建函數(shù)，調(diào)用它并不會(huì)自動(dòng) dispatch 這個(gè) action。比如，下面的代碼什么也不會(huì)做：

`TodoActions.js`

export function addTodo(text) {
  return { type: 'ADD_TODO', text };
}

`AddTodo.js`

import { Component } from 'react';
import { addTodo } from './TodoActions';

class AddTodo extends Component {
  handleClick() {
    // 不起作用！
    addTodo('Fix the issue');
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        Add
      </button>
    );
  }
}

它不起作用是因?yàn)槟愕?action 創(chuàng)建函數(shù)只是一個(gè)返回 action 的函數(shù)而已。你需要手動(dòng) dispatch 它。我們不能在定義時(shí)把 action 創(chuàng)建函數(shù)綁定到指定的 Store 上，因?yàn)閼?yīng)用在服務(wù)端渲染時(shí)需要為每個(gè)請(qǐng)求都對(duì)應(yīng)一個(gè)獨(dú)立的 Redux store。

解法是調(diào)用 store 實(shí)例上的 dispatch() 方法。

handleClick() {
  // 生效！（但你需要先以某種方式拿到 store）
  store.dispatch(addTodo('Fix the issue'));
}

如果組件的層級(jí)非常深，把 store 一層層傳下去很麻煩。因此 react-redux 提供了 connect 這個(gè) 高階組件，它除了可以幫你監(jiān)聽 Redux store，還會(huì)把 dispatch 注入到組件的 props 中。

修復(fù)后的代碼是這樣的：

import { Component } from 'react';
import { connect } from 'react-redux';
import { addTodo } from './TodoActions';

class AddTodo extends Component {
  handleClick() {
    // 生效！
    this.props.dispatch(addTodo('Fix the issue'));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        Add
      </button>
    );
  }
}

// 除了 state，`connect` 還把 `dispatch` 放到 props 里。
export default connect(AddTodo, state => ({}))

如果你想的話也可以把 dispatch 手動(dòng)傳給其它組件。