场景
redux管理数据状态，父子页面都是表单页面，非单页场景，父页面做了编辑，然后跳转到子页面，子页面编辑好之后回到父页面，此时希望保留在父页面编辑过的信息。
方案
获取redux store，离开父页面之前，将redux store做快照，保存进sessionStorage, 从子页面回到父页面时用sessionStorage恢复页面。
我们知道，通过store.getState() 可以获取整个store数据，但是在组件内部如何获取store呢？
一种方案是可以使用context，在react 中，context可以跨组件传递数据，比如有一个三层嵌套的组件，在MessageList组件中要传递一个color的props给Operation组件，那么一般做法是将color传递给Message, 再由Message传递给Operation：
如果使用context，可以这样：
class MessageList extends Component {
static childContextTypes = {
color: PropTypes.string,
}
getChildContext() {
return { color: '#ec5454' };
}
render() {
return (<div>
{
this.props.messages.map((item, index) => {
return (<Message data={item} key={index} />);
})
}
</div>);
}
}
class Message extends Component {
render() {
const { text } = this.props.data;
return (<div style={{ backgroundColor: '#fff', padding: '4px' }}>
<span>{text}</span>
<Operation />
</div>);
}
}
const messages = [{ text: '您的申请被驳回啦' }, { text: '您当前暂时没有资质' }, { text: '您可以提高您的消费' }];
class Operation extends Component {
static contextTypes = {
color: PropTypes.string,
}
render() {
return (
<span style={{ color: `${this.context.color}`, marginLeft: '24px' }}>立即修改</span>
);
}
}
即在最外层组件MessageList里面添加getChildContext 和childContextTypes，子组件需要使用这些内容的地方，定义contextTypes, 这样在所有子组件中都可以通过this.context.color拿到color。
在使用redux管理数据状态时，store是挂在最外层Provider上的，而在Provider内部，已经在getChildContext里返回了整个store：
class Provider extends Component {
getChildContext() {
return { [storeKey]: this[storeKey], [subscriptionKey]: null } // storeKey 默认是'store'
}
constructor(props, context) {
super(props, context)
this[storeKey] = props.store;
}
render() {
return Children.only(this.props.children)
}
}
因此，在子组件可以直接拿到整个store了：
class BasicInfo extends Component {
static contextTypes = {
store: PropTypes.object,
};
handleLeaveToShopkeeper = () => {
const storeData = this.context.store.getState();
}
render() {
...
}
}
另一个方案如果使用了redux-thunk中间件，那么在action里面，第二个参数里有个getState参数，可以获取整个store，使用这种方法只能在action里拿到store的数据，不能自由在各个组件内部获取redux store的数据。例如：
updateInfo: (data) => async(dispatch, getState) => {
// console.log(getState().storeData); 这里可以拿到store数据
...
},
redux-thunk:
function createThunkMiddleware(extraArgument) {
return function (_ref) {
var dispatch = _ref.dispatch,
getState = _ref.getState;
return function (next) {
return function (action) {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
};
};
}
