如何使用onSnapshot通过Redux更新属性

// 1. 创建reducer
const initialState = {
  property: ''
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_PROPERTY':
      return {
        ...state,
        property: action.payload
      };
    default:
      return state;
  }
};

// 2. 创建action
const updateProperty = (value) => {
  return {
    type: 'UPDATE_PROPERTY',
    payload: value
  };
};

// 3. 创建store
const store = createStore(reducer);

// 4. 在组件中使用connect函数将Redux的状态和操作映射到组件的props中
const mapStateToProps = (state) => {
  return {
    property: state.property
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    updateProperty: (value) => dispatch(updateProperty(value))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

// 5. 在组件中使用onSnapshot函数监听属性的变化
componentDidMount() {
  this.props.onSnapshot(this.handleSnapshot);
}

handleSnapshot = (snapshot) => {
  // 8. 当属性发生变化时，触发action来更新属性的值
  this.props.updateProperty(snapshot);
}