组件内部获取redux store的方法

场景

redux管理数据状态，父子页面都是表单页面，非单页场景，父页面做了编辑，然后跳转到子页面，子页面编辑好之后回到父页面，此时希望保留在父页面编辑过的信息。

方案

获取redux store，离开父页面之前，将redux store做快照，保存进sessionStorage, 从子页面回到父页面时用sessionStorage恢复页面。
我们知道，通过store.getState() 可以获取整个store数据，但是在组件内部如何获取store呢？
一种方案是可以使用context，在react 中，context可以跨组件传递数据，比如有一个三层嵌套的组件，在MessageList组件中要传递一个color的props给Operation组件，那么一般做法是将color传递给Message, 再由Message传递给Operation：

image.png

如果使用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);
      };
    };
  };
}