react 怎么清除当前的历史记录

1. 手动清除可以，但是比较麻烦，需要手写action，然后在每个reducer中监听。

2. 如果想通用一点，可以先建个action

// keys 为state的key
export function clearState(...keys) {
return {
type: CLEAR_STATE,
keys: keys
};
}

3.然后写个高阶组件

import React, {PropTypes, Component} from 'react';
import {clearState} from 'actions';
import {connect} from 'react-redux';

const clearStateWithUnmount = (...stateKeys) => WrappedComponent => {
if(!stateKeys) {
return;
}
let instance = class extends Component {
componentWillUnmount() {
this.props.dispatch(clearState(...stateKeys));
}

render() {
return ;
}
};
return connect(null)(instance);
};

export default ClearStateWithUnmount;

4.在创建store时，处理一下

// 这里引入所有reducer
const appReducer = combineReducers({
...reducers
});
const rootReducer = (state, action) => {
// 清除指定的state
if(action.type === CLEAR_STATE) {
const {type, keys} = action;
keys.forEach(k => {
_.set(state, k, undefined);

//_.set方法为lodash中的方法，这里将对应的state设为undefined

});
}
return appReducer(state, action);
};
//创建store
const store = createStore(rootReducer);

5.大功告成，比如有个user组件

//这里使用装饰器模式，需要babel支持
@clearStateWithUnmount('user')
class User extends Component{
...
}
//如果不想用装饰器，可以用一般的写法
clearStateWithUnmount('user')(User)

6.这样在User组件unmount时候，就清除了相应的store

7.如果你的state有深层嵌套，比如{user: {name: 'foo', age: 12}}，这里也同样支持
@clearStateWithUnmount('user.name', 'user.age')

8.如果不想侵入现有项目，可以做个中间件，原理是一样的