單 Store 單頁應用的狀態重置

摘要： 如果是基於 Redux 等單 Store 形式來構建單頁應用，那麼需要注意，大多數時候，切換頁面時（如前進、後退或直接訪問），需要注意狀態的重置。 如果用的是 react-router-redux，那麼需要在切換後做 reset 的頁面的 reducer 中，在action 是 ...

如果是基於 Redux 等單 Store 形式來構建單頁應用，那麼需要注意，大多數時候，切換頁面時（如前進、後退或直接訪問），需要注意狀態的重置。

如果用的是 react-router-redux，那麼需要在切換後做 reset 的頁面的 reducer 中，在action 是LOCATION_CHANGE 時，返回該 reducer 的 initState。如：

// reducers/page1.js
import { LOCATION_CHANGE } from 'react-router-redux';
import * as actions from '../../actions/page1';

const initialState = {
list: ['預設文字'],
};

export default function index(state = initialState, action) {
switch (action.type) {
case LOCATION_CHANGE:
return initialState;

case actions.ADD_TEXT:

return Object.assign({}, state, {
list: [action.data, ...state.list],
});

default:
return state;
}
}

如果用的是 connected-react-router，也類似。

// reducers/counter.js
import { LOCATION_CHANGE } from 'connected-react-router';

const counterReducer = (state = 0, action) => {
switch (action.type) {
case LOCATION_CHANGE:
return 0;
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}

export default counterReducer